@charset "UTF-8";
/*start helpers style*/
/* start main colors variables */
/* end colors variables */
.row.row-space-0 {
  margin: 0;
}

.row.row-space-2 {
  margin: 0 -1px;
}

.row.row-space-4 {
  margin: 0 -2px;
}

.row.row-space-6 {
  margin: 0 -3px;
}

.row.row-space-8 {
  margin: 0 -4px;
}

.row.row-space-10 {
  margin: 0 -5px;
}

.row.row-space-12 {
  margin: 0 -6px;
}

.row.row-space-14 {
  margin: 0 -7px;
}

.row.row-space-16 {
  margin: 0 -8px;
}

.row.row-space-18 {
  margin: 0 -10px;
}

.row.row-space-22 {
  margin: 0 -11px;
}

.row.row-space-24 {
  margin: 0 -12px;
}

.row.row-space-26 {
  margin: 0 -13px;
}

.row.row-space-28 {
  margin: 0 -14px;
}

.row.row-space-30 {
  margin: 0 -15px;
}

.row.row-space-0 > [class*=col-] {
  padding: 0;
}

.row.row-space-2 > [class*=col-] {
  padding: 0 1px;
}

.row.row-space-4 > [class*=col-] {
  padding: 0 2px;
}

.row.row-space-6 > [class*=col-] {
  padding: 0 3px;
}

.row.row-space-8 > [class*=col-] {
  padding: 0 4px;
}

.row.row-space-10 > [class*=col-] {
  padding: 0 5px;
}

.row.row-space-12 > [class*=col-] {
  padding: 0 6px;
}

.row.row-space-14 > [class*=col-] {
  padding: 0 7px;
}

.row.row-space-16 > [class*=col-] {
  padding: 0 8px;
}

.row.row-space-18 > [class*=col-] {
  padding: 0 9px;
}

.row.row-space-20 > [class*=col-] {
  padding: 0 10px;
}

.row.row-space-22 > [class*=col-] {
  padding: 0 11px;
}

.row.row-space-24 > [class*=col-] {
  padding: 0 12px;
}

.row.row-space-26 > [class*=col-] {
  padding: 0 13px;
}

.row.row-space-28 > [class*=col-] {
  padding: 0 14px;
}

.row.row-space-30 > [class*=col-] {
  padding: 0 15px;
}

.semi-bold {
  font-weight: 600;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-visible {
  overflow-y: visible !important;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}

.m-auto {
  margin: 0 auto !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 1px !important;
}

.m-2 {
  margin: 2px !important;
}

.m-3 {
  margin: 3px !important;
}

.m-4 {
  margin: 4px !important;
}

.m-5 {
  margin: 5px !important;
}

.m-10 {
  margin: 10px !important;
}

.m-15 {
  margin: 15px !important;
}

.m-20 {
  margin: 20px !important;
}

.m-25 {
  margin: 25px !important;
}

.m-30 {
  margin: 30px !important;
}

.m-35 {
  margin: 35px !important;
}

.m-40 {
  margin: 40px !important;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-t-1 {
  margin-top: 1px !important;
}

.m-t-2 {
  margin-top: 2px !important;
}

.m-t-3 {
  margin-top: 3px !important;
}

.m-t-4 {
  margin-top: 4px !important;
}

.m-t-5 {
  margin-top: 5px !important;
}

.m-t-10 {
  margin-top: 10px !important;
}

.m-t-15 {
  margin-top: 15px !important;
}

.m-t-20 {
  margin-top: 20px !important;
}

.m-t-25 {
  margin-top: 25px !important;
}

.m-t-30 {
  margin-top: 30px !important;
}

.m-t-35 {
  margin-top: 35px !important;
}

.m-t-40 {
  margin-top: 40px !important;
}

.m-r-0 {
  margin-right: 0 !important;
}

.m-r-1 {
  margin-right: 1px !important;
}

.m-r-2 {
  margin-right: 2px !important;
}

.m-r-3 {
  margin-right: 3px !important;
}

.m-r-4 {
  margin-right: 4px !important;
}

.m-r-5 {
  margin-right: 5px !important;
}

.m-r-10 {
  margin-right: 10px !important;
}

.m-r-15 {
  margin-right: 15px !important;
}

.m-r-20 {
  margin-right: 20px !important;
}

.m-r-25 {
  margin-right: 25px !important;
}

.m-r-30 {
  margin-right: 30px !important;
}

.m-r-35 {
  margin-right: 35px !important;
}

.m-r-40 {
  margin-right: 40px !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-b-1 {
  margin-bottom: 1px !important;
}

.m-b-2 {
  margin-bottom: 2px !important;
}

.m-b-3 {
  margin-bottom: 3px !important;
}

.m-b-4 {
  margin-bottom: 4px !important;
}

.m-b-5 {
  margin-bottom: 5px !important;
}

.m-b-10 {
  margin-bottom: 10px !important;
}

.m-b-15 {
  margin-bottom: 15px !important;
}

.m-b-20 {
  margin-bottom: 20px !important;
}

.m-b-25 {
  margin-bottom: 25px !important;
}

.m-b-30 {
  margin-bottom: 30px !important;
}

.m-b-35 {
  margin-bottom: 35px !important;
}

.m-b-40 {
  margin-bottom: 40px !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-l-1 {
  margin-left: 1px !important;
}

.m-l-2 {
  margin-left: 2px !important;
}

.m-l-3 {
  margin-left: 3px !important;
}

.m-l-4 {
  margin-left: 4px !important;
}

.m-l-5 {
  margin-left: 5px !important;
}

.m-l-10 {
  margin-left: 10px !important;
}

.m-l-15 {
  margin-left: 15px !important;
}

.m-l-20 {
  margin-left: 20px !important;
}

.m-l-25 {
  margin-left: 25px !important;
}

.m-l-30 {
  margin-left: 30px !important;
}

.m-l-35 {
  margin-left: 35px !important;
}

.m-l-40 {
  margin-left: 40px !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 1px !important;
}

.p-2 {
  padding: 2px !important;
}

.p-3 {
  padding: 3px !important;
}

.p-4 {
  padding: 4px !important;
}

.p-5 {
  padding: 5px !important;
}

.p-10 {
  padding: 10px !important;
}

.p-15,
.wrapper {
  padding: 15px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-25 {
  padding: 25px !important;
}

.p-30 {
  padding: 30px !important;
}

.p-35 {
  padding: 35px !important;
}

.p-40 {
  padding: 40px !important;
}

.p-t-0 {
  padding-top: 0 !important;
}

.p-t-1 {
  padding-top: 1px !important;
}

.p-t-2 {
  padding-top: 2px !important;
}

.p-t-3 {
  padding-top: 3px !important;
}

.p-t-4 {
  padding-top: 4px !important;
}

.p-t-5 {
  padding-top: 5px !important;
}

.p-t-10 {
  padding-top: 10px !important;
}

.p-t-15 {
  padding-top: 15px !important;
}

.p-t-20 {
  padding-top: 20px !important;
}

.p-t-25 {
  padding-top: 25px !important;
}

.p-t-30 {
  padding-top: 30px !important;
}

.p-t-35 {
  padding-top: 35px !important;
}

.p-t-40 {
  padding-top: 40px !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

.p-r-1 {
  padding-right: 1px !important;
}

.p-r-2 {
  padding-right: 2px !important;
}

.p-r-3 {
  padding-right: 3px !important;
}

.p-r-4 {
  padding-right: 4px !important;
}

.p-r-5 {
  padding-right: 5px !important;
}

.p-r-10 {
  padding-right: 10px !important;
}

.p-r-15 {
  padding-right: 15px !important;
}

.p-r-20 {
  padding-right: 20px !important;
}

.p-r-25 {
  padding-right: 25px !important;
}

.p-r-30 {
  padding-right: 30px !important;
}

.p-r-35 {
  padding-right: 35px !important;
}

.p-r-40 {
  padding-right: 40px !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-b-1 {
  padding-bottom: 1px !important;
}

.p-b-2 {
  padding-bottom: 2px !important;
}

.p-b-3 {
  padding-bottom: 3px !important;
}

.p-b-4 {
  padding-bottom: 4px !important;
}

.p-b-5 {
  padding-bottom: 5px !important;
}

.p-b-10 {
  padding-bottom: 10px !important;
}

.p-b-15 {
  padding-bottom: 15px !important;
}

.p-b-20 {
  padding-bottom: 20px !important;
}

.p-b-25 {
  padding-bottom: 25px !important;
}

.p-b-30 {
  padding-bottom: 30px !important;
}

.p-b-35 {
  padding-bottom: 35px !important;
}

.p-b-40 {
  padding-bottom: 40px !important;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-l-1 {
  padding-left: 1px !important;
}

.p-l-2 {
  padding-left: 2px !important;
}

.p-l-3 {
  padding-left: 3px !important;
}

.p-l-4 {
  padding-left: 4px !important;
}

.p-l-5 {
  padding-left: 5px !important;
}

.p-l-10 {
  padding-left: 10px !important;
}

.p-l-15 {
  padding-left: 15px !important;
}

.p-l-20 {
  padding-left: 20px !important;
}

.p-l-25 {
  padding-left: 25px !important;
}

.p-l-30 {
  padding-left: 30px !important;
}

.p-l-35 {
  padding-left: 35px !important;
}

.p-l-40 {
  padding-left: 40px !important;
}

.f-s-8 {
  font-size: 8px !important;
}

.f-s-9 {
  font-size: 9px !important;
}

.f-s-10 {
  font-size: 10px !important;
}

.f-s-11 {
  font-size: 11px !important;
}

.f-s-12 {
  font-size: 12px !important;
}

.f-s-13 {
  font-size: 13px !important;
}

.f-s-14 {
  font-size: 14px !important;
}

.f-s-15 {
  font-size: 15px !important;
}

.f-s-16 {
  font-size: 16px !important;
}

.f-s-17 {
  font-size: 17px !important;
}

.f-s-18 {
  font-size: 18px !important;
}

.f-s-19 {
  font-size: 19px !important;
}

.f-s-20 {
  font-size: 20px !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

.pull-none {
  float: none !important;
}

.f-w-100 {
  font-weight: 100 !important;
}

.f-w-200 {
  font-weight: 200 !important;
}

.f-w-300 {
  font-weight: 300 !important;
}

.f-w-400 {
  font-weight: 400 !important;
}

.f-w-500 {
  font-weight: 500 !important;
}

.f-w-600 {
  font-weight: 600 !important;
}

.f-w-700 {
  font-weight: 700 !important;
}

.table-td-valign-middle td,
.table-th-valign-middle th,
.table-valign-middle td,
.table-valign-middle th {
  vertical-align: middle !important;
}

.table-td-valign-top td,
.table-th-valign-top th,
.table-valign-top td,
.table-valign-top th {
  vertical-align: top !important;
}

.table-td-valign-bottom td,
.table-th-valign-bottom th,
.table-valign-bottom td,
.table-valign-bottom th {
  vertical-align: bottom !important;
}

.vertical-box {
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  height: 100%;
  width: 100%;
}

.vertical-box-column {
  display: table-cell;
  vertical-align: top;
  height: 100%;
}

.vertical-box-row {
  display: table-row;
  height: 100%;
}

.vertical-box-row > .vertical-box-cell {
  position: relative;
  height: 100%;
  width: 100%;
  float: none;
}

.vertical-box-row > .vertical-box-cell > .vertical-box-inner-cell {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.bwizard-steps,
.gritter-item-wrapper,
.text-ellipsis {
  overflow: hidden !important;
}

.panel-expand .vertical-box .vertical-box-column {
  display: table-cell;
}

.page-content-full-height .content {
  position: absolute;
  left: 0;
  top: 54px;
  right: 0;
  bottom: -1px;
  transform: translateZ(0);
}

.no-rounded-corner {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}

.rounded-corner {
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  border-radius: 50% !important;
}

.no-border {
  border: 0 !important;
}

.border-top-1 {
  border-top: 1px solid #eee !important;
}

.border-right-1 {
  border-right: 1px solid #eee !important;
}

.border-bottom-1 {
  border-bottom: 1px solid #eee !important;
}

.border-left-1 {
  border-left: 1px solid #eee !important;
}

.no-box-shadow {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.text-inverse {
  color: #2d353c !important;
}

a.text-inverse:focus,
a.text-inverse:hover {
  color: #575d63 !important;
}

.text-success {
  color: #00acac !important;
}

a.text-success:focus,
a.text-success:hover {
  color: #33bdbd !important;
}

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

a.text-info:focus,
a.text-info:hover {
  color: #6dc5de !important;
}

.text-primary {
  color: #348fe2 !important;
}

a.text-primary:focus,
a.text-primary:hover {
  color: #5da5e8 !important;
}

.text-warning {
  color: #f59c1a !important;
}

a.text-warning:focus,
a.text-warning:hover {
  color: #f7b048 !important;
}

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

a.text-danger:focus,
a.text-danger:hover {
  color: #ff7c79 !important;
}

.text-white {
  color: #fff !important;
}

a.text-white:focus,
a.text-white:hover {
  color: #f0f3f4 !important;
}

.bg-white {
  background: #fff !important;
}

.bg-silver-lighter {
  background: #f4f6f7 !important;
}

.bg-silver {
  background: #f0f3f4 !important;
}

.bg-silver-darker {
  background: #b4b6b7 !important;
}

.bg-black {
  background: #2d353c !important;
}

.bg-black-darker {
  background: #242a30 !important;
}

.bg-black-lighter {
  background: #575d63 !important;
}

.bg-grey {
  background: #b6c2c9 !important;
}

.bg-grey-darker {
  background: #929ba1 !important;
}

.bg-grey-lighter {
  background: #c5ced4 !important;
}

.bg-red {
  background: #ff5b57 !important;
}

.bg-red-darker {
  background: #cc4946 !important;
}

.bg-red-lighter {
  background: #ff7c79 !important;
}

.bg-orange {
  background: #f59c1a !important;
}

.bg-orange-darker {
  background: #c47d15 !important;
}

.bg-orange-lighter {
  background: #f7b048 !important;
}

.bg-yellow {
  background: #e3fa3e !important;
}

.bg-yellow-darker {
  background: #b6c832 !important;
}

.bg-yellow-lighter {
  background: #e9fb65 !important;
}

.bg-green {
  background: #28be3b !important;
}

.bg-green-darker {
  background: #008a8a !important;
}

.bg-green-lighter {
  background: #33bdbd !important;
}

.bg-blue {
  background: #348fe2 !important;
}

.bg-blue-darker {
  background: #2a72b5 !important;
}

.bg-blue-lighter {
  background: #5da5e8 !important;
}

.bg-aqua {
  background: #49b6d6 !important;
}

.bg-aqua-darker {
  background: #3a92ab !important;
}

.bg-aqua-lighter {
  background: #6dc5de !important;
}

.bg-purple {
  background: #727cb6 !important;
}

.bg-purple-darker {
  background: #5b6392 !important;
}

.bg-purple-lighter {
  background: #8e96c5 !important;
}

.no-bg {
  background: 0 0 !important;
}

.height-xs {
  height: 150px !important;
}

.height-sm {
  height: 300px !important;
}

.height-md {
  height: 450px !important;
}

.height-lg {
  height: 600px !important;
}

.height-full {
  height: 100% !important;
}

.height-50 {
  height: 50px !important;
}

.height-100 {
  height: 100px !important;
}

.height-150 {
  height: 150px !important;
}

.height-200 {
  height: 200px !important;
}

.height-250 {
  height: 250px !important;
}

.height-300 {
  height: 300px !important;
}

.height-350 {
  height: 350px !important;
}

.height-400 {
  height: 400px !important;
}

.height-450 {
  height: 450px !important;
}

.height-500 {
  height: 500px !important;
}

.height-550 {
  height: 550px !important;
}

.height-600 {
  height: 600px !important;
}

.width-xs {
  width: 150px !important;
}

.width-sm {
  width: 300px !important;
}

.width-md {
  width: 450px !important;
}

.width-lg {
  width: 600px !important;
}

.width-full {
  width: 100% !important;
}

.width-50 {
  width: 50px !important;
}

.width-100 {
  width: 100px !important;
}

.width-150 {
  width: 150px !important;
}

.width-200 {
  width: 200px !important;
}

.width-250 {
  width: 250px !important;
}

.width-300 {
  width: 300px !important;
}

.width-350 {
  width: 350px !important;
}

.width-400 {
  width: 400px !important;
}

.width-450 {
  width: 450px !important;
}

.width-500 {
  width: 500px !important;
}

.width-550 {
  width: 550px !important;
}

.width-600 {
  width: 600px !important;
}

.animated {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.btn .combobox-clear,
.flot-tooltip {
  opacity: 1;
  filter: alpha(opacity=100);
}

.text-ellipsis {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.underline {
  border-bottom: 1px solid #e2e7eb !important;
}

/*end helpers style*/
/*start header style*/
html {
  font-size: 16px;
}

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

body {
  position: relative;
  overflow-x: hidden;
  height: initial;
  background: #eff2f5;
}

body.bg-white {
  padding: 0 10px;
}

body.ltr {
  font-family: "Roboto", sans-serif;
  text-align: left !important;
  direction: ltr;
}

button:active {
  transform: scale(0.95);
}

@media (min-width: 1200px) {
  .container {
    max-width: 1350px;
    width: initial;
  }
}

.justify-content-center {
  justify-content: center;
}

hr {
  border-top: 1px solid rgba(139, 139, 139, 0.3294117647);
}

.btn.btn-primary {
  font-weight: 600;
}

.d-flex-align {
  display: flex;
  align-items: center;
}

.d-flex-center-gap {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dir-ltr {
  direction: ltr;
}

.row {
  margin-left: 0;
  margin-right: 0;
}
.row .col-grid {
  padding-left: 5px;
  padding-right: 5px;
}
@media (max-width: 575.98px) {
  .row .col-grid {
    padding-left: 0;
    padding-right: 0;
  }
}
.row .col {
  float: right;
  flex-basis: auto;
}
@media (max-width: 575.98px) {
  .row .col {
    padding-left: 0 !important;
  }
}
@media (max-width: 575.98px) {
  .row .col-xs-6 {
    width: 50% !important;
    padding: 5px !important;
  }
}

.wihte-container {
  padding: 15px 25px;
  background-color: #fff;
}
@media (max-width: 575.98px) {
  .wihte-container {
    padding: 15px !important;
  }
}

.position-right {
  position: absolute;
  right: 0;
}
@media (max-width: 575.98px) {
  .position-right {
    position: initial;
    display: inline-grid;
  }
}

.position-left {
  position: absolute;
  left: 10px;
}
@media (max-width: 575.98px) {
  .position-left {
    position: initial;
    display: inline-grid;
  }
}

@media (max-width: 767.98px) {
  .cookiealert {
    width: 100%;
  }
}

.h-inherit {
  height: inherit;
}

.global-link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

ul {
  list-style: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* jGrowl styles removed — using gritter from v5.5.2 */
/* See widgets/_jgrowl.scss for gritter color variants */
/* ========== End article Style =========== */
/* ========== end media style =========== */
.fb_iframe_widget_fluid_desktop,
.fb_iframe_widget_fluid_desktop span,
.fb_iframe_widget_fluid_desktop iframe {
  max-width: 100%;
  width: 100% !important;
}

/* ========== start img style =========== */
.img-box {
  width: 100%;
  overflow: hidden;
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========== end img style =========== */
.clear {
  clear: both;
}

.m-none {
  margin: 0 !important;
}

.ml-none {
  margin-left: 0 !important;
}

.mt-none {
  margin-top: 0 !important;
}

.mb-none {
  margin-bottom: 0 !important;
}

.mr-none {
  margin-right: 0 !important;
}

.pr-none {
  padding-right: 0 !important;
}
@media (max-width: 767.98px) {
  .pr-none {
    padding-right: 15px !important;
  }
}

@media (max-width: 767.98px) {
  .pr-maxMd-none {
    padding-right: 0 !important;
  }
}

.pl-none {
  padding-left: 0 !important;
}
@media (max-width: 767.98px) {
  .pl-none {
    padding-left: 15px !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .pl-maxXl-none {
    padding-left: 0 !important;
  }
}

.pr-none {
  padding-right: 0 !important;
}

.pl-10 {
  padding-left: 10px;
}
@media (max-width: 575.98px) {
  .pl-10 {
    padding-left: 15px !important;
  }
}

.pt-15 {
  padding-top: 15px;
}

.pb-none {
  padding-bottom: 0 !important;
}

.pt-none {
  padding-top: 0 !important;
}

.p-none {
  padding: 0;
}

@media (max-width: 1199.98px) {
  .d-none-1200 {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .d-none-sm {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .d-none-lg {
    display: none !important;
  }
}

.justify-center {
  justify-content: center;
}
@media (max-width: 991.98px) {
  .justify-center {
    justify-content: center;
  }
}

.inline-flex {
  align-items: center;
  display: inline-flex;
}

.class-center {
  justify-content: center;
  display: flex;
  align-items: center;
  margin: auto;
  text-align: center;
}

.w-100 {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.d-none {
  display: none !important;
}

.show-on-phones-only {
  display: none;
}

.btn-40 {
  height: 40px;
}

.display-flex {
  display: flex;
  float: left;
  margin: 0;
  width: 100%;
}

.align-center {
  height: 40px;
  display: flex !important;
  align-items: center;
}

.help-block {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 9px;
}
.help-block strong {
  font-size: 9px;
  font-weight: 500;
}

.d-flex {
  display: flex;
  align-items: center;
}

.d-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.d-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d-inline-flex {
  display: inline-flex;
  align-items: center;
}

.position-relative {
  position: relative;
}

.justify-left {
  justify-content: left;
}

.btn-publish {
  font-size: 14px;
  font-weight: bold;
  height: 40px;
  margin: 0 10px;
}

.btn.btn-white {
  display: inline-flex;
  align-items: center;
  background-color: #737373;
  color: #fff;
  grid-gap: 7px;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.note-toolbar {
  display: inline-block !important;
}

.display-flex-feild {
  display: flex;
}

.card-header {
  color: #fff;
}

.card-body .input-group .lang-label {
  position: absolute;
  left: 0;
  top: -20px;
  height: 20px;
  font-size: 8px;
  font-weight: bold;
  background-color: #d9e0e7;
  color: #514f4f;
  border: none;
  margin-right: 0;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
}

.translation-ar .input-group {
  width: 100%;
  position: relative;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 10px;
}

::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 10px;
}

:-ms-input-placeholder {
  /* IE 10+ */
  font-size: 10px;
}

:-moz-placeholder {
  /* Firefox 18- */
  font-size: 10px;
}

input[type=email].big-dog::-webkit-input-placeholder {
  font-size: 10px;
}

input::placeholder {
  font-size: 10px;
}

.card-body {
  /* padding: 10px 5px;*/
}
.card-body .form-group label.control-label {
  font-weight: bold;
}

.unchecked {
  background-color: rgb(255, 255, 255) !important;
  border-color: rgb(223, 223, 223) !important;
  box-shadow: rgb(223, 223, 223) 0 0 0 0 inset !important;
  transition: border 0.5s ease 0s, box-shadow 0.5s ease 0s !important;
}
.unchecked small {
  left: 0 !important;
}

.card-body {
  padding: 10px;
}

.card-title {
  min-height: 40px;
  max-height: 50px;
  overflow: hidden;
  line-height: 1.3;
  font-weight: bold;
  font-size: 18px;
}

.card-text {
  min-height: 40px;
  max-height: 40px;
  overflow: hidden;
  line-height: 1.4;
  font-size: 14px;
}

.wiki-card {
  background-color: #fff;
  position: relative;
}
.wiki-card .card-box {
  width: 100%;
  height: 220px;
  background-color: #000;
}

.categories-list {
  padding: 10px;
}
.categories-list li {
  padding: 10px 15px;
  background-color: #f2f6fa;
  margin-bottom: 10px;
  justify-content: space-between;
}
.categories-list li svg, .categories-list li i {
  font-size: 20px;
}

.navbar-user img {
  float: initial;
}
.navbar-user a svg, .navbar-user a i {
  font-size: 16px;
  margin: 0 4px;
}
.navbar-user a span {
  font-size: 14px;
  max-width: 65px;
  height: 20px;
  overflow: hidden;
  display: inline-flex;
}

.btn.btn-info {
  color: #fff;
  background: #348fe2;
  border-color: #348fe2;
}

.icons-size .btn.dropdown-toggle {
  border: 1px solid #fff !important;
  padding: 6px 12px 4px;
}
.icons-size .dropdown-menu {
  right: initial;
  left: 0;
  float: right;
  padding: 5px 12px !important;
  min-width: 170px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.icons-size .dropdown-menu li a {
  color: #444;
}
.icons-size .dropdown-menu li a, .icons-size .dropdown-menu li button {
  text-align: right;
  padding: 5px 0;
  font-size: 12px;
  font-weight: normal;
  margin: 0 !important;
  background-color: transparent;
  color: #7b8791;
  width: 100%;
  align-items: center;
  height: auto;
}
.icons-size .dropdown-menu li a span, .icons-size .dropdown-menu li button span {
  height: initial;
  padding: 0;
  font-size: 12px;
}
.icons-size .dropdown-menu li svg, .icons-size .dropdown-menu li i {
  font-size: 12px;
  color: #7b8791;
  margin-left: 5px;
}
.icons-size .dropdown-menu li .clipboard {
  height: initial;
}
.icons-size .dropdown-menu li .clipboard span {
  height: initial;
  padding: 0;
  font-size: 12px;
}
.icons-size svg, .icons-size i {
  color: #77848e;
  font-size: 18px;
}
.icons-size .btn:active,
.icons-size .btn-group.open .dropdown-toggle {
  box-shadow: none;
  border: 1px solid #77848e !important;
}

.form-control[disabled],
.form-control[readonly] fieldset[disabled] .form-control {
  background: #f4f4f4;
  border: none;
  opacity: 1;
}

.card-customers tbody .gradeX td,
.card-orders tbody .gradeX td,
.pages-panel tbody .gradeX td,
.card-addition tbody .gradeX td {
  padding: 7px 5px;
}

.card-title .accordion-toggle {
  padding: 10px;
  width: 100%;
}

.form-horizontal .checkbox,
.form-horizontal .radio {
  display: inline-flex;
  margin-right: 10px;
  align-items: center;
}
.form-horizontal .form-group {
  margin-right: 0;
  margin-left: 0;
}

.btn-add {
  height: 42px;
  font-size: 15px;
  padding: 0 25px;
  margin: 0 5px;
  font-weight: bold;
}

textarea.form-control {
  min-height: 80px;
  max-height: 250px !important;
  max-width: 100%;
  min-width: 70%;
}

.category-selection .panel-collapse .card-body .control-label {
  font-weight: bold;
}

.font-bold {
  font-weight: bold;
}

.form-group .input-group {
  width: 100%;
}

.bg-transparent {
  background: transparent;
}

.small-disc {
  font-weight: normal;
  margin: 5px;
  color: #858585;
  display: inline-block;
}

.input-container {
  background-color: #fff;
  margin: 5px 0;
  padding: 25px 25px 25px 0;
}

@media (max-width: 767px) {
  .input-container {
    padding: 5px;
  }
}
.btn.btn-info {
  font-size: 14px;
  font-weight: bold;
  height: 40px;
}

.accordion-toggle svg, .accordion-toggle i {
  width: 18px;
  font-size: 15px;
}

@media (max-width: 567px) {
  .card-header {
    display: block;
  }
  .card-header h4 label {
    font-size: 9px;
  }
  .note-toolbar .note-style {
    margin: 4px;
  }
}
.note h4 {
  font-weight: bold;
}

@media (max-width: 575.98px) {
  .phone-display {
    display: inline-block;
    padding: 0 !important;
  }
}

.bg-transparent {
  background-color: transparent !important;
}

.float-none {
  float: none;
}

.iti--allow-dropdown {
  width: 100%;
}
.iti--allow-dropdown .iti__arrow {
  margin-right: 6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.iti--allow-dropdown input {
  padding-left: 60px !important;
  direction: ltr !important;
}

.iti__country-list {
  left: 0;
  z-index: 10;
}

.btn-icon.btn-scroll-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  bottom: 65px;
  right: 15px;
}

.btn-scroll-to-top.fade {
  display: none;
}

.btn-scroll-to-top.fade.in {
  display: initial;
}

@media (max-width: 767px) {
  .btn-scroll-to-top {
    display: none !important;
  }
}
#translations-menu {
  display: flex;
  margin: 0 5px;
}

.website-settings .col-md-4 {
  padding: 0 !important;
}

@media (max-width: 575.98px) {
  .d-inherit {
    display: inherit;
    width: 100%;
  }
}

.widget-stats .stats-icon {
  opacity: 0.5;
}

.note-editable {
  font-size: 18px;
}

.marketing-request-status button {
  background-color: #deffec;
  color: #1db37b;
  width: 35px;
  height: 35px;
  border-radius: 8px;
  padding: 0;
}
.marketing-request-status .items-delete {
  background-color: #fcdcdc;
  color: #c10a0a;
}

#quickOrder {
  background-color: #FFE13D !important;
  color: #362e2e !important;
  font-weight: 700;
  font-size: 10px;
  padding: 3px 8px;
  display: inline-flex;
  border-radius: 5px;
}

.btn-cta-save {
  height: 50px;
  padding: 0 30px;
  border-radius: 7px;
  font-weight: bold;
  font-size: 16px;
}
.btn-cta-save:hover {
  background: #1a2229;
  border-color: #1a2229;
}

.buttons-action-container {
  display: flex;
  justify-content: space-between;
}
.buttons-action-container a, .buttons-action-container button {
  height: 40px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 14px;
  gap: 4px;
  margin: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.buttons-action-container a i, .buttons-action-container a svg, .buttons-action-container button i, .buttons-action-container button svg {
  margin: 0;
  font-size: 16px;
}
.buttons-action-container .main-primary {
  background-color: #348fe2;
  color: #fff;
}
.buttons-action-container .secondary-btn-action {
  display: flex;
  align-items: center;
  gap: 5px;
}
.buttons-action-container .secondary-btn-action a, .buttons-action-container .secondary-btn-action button {
  background-color: #d4eaff;
  color: #455461;
}
.buttons-action-container .secondary-btn-action a:hover, .buttons-action-container .secondary-btn-action button:hover {
  background-color: #348fe2;
  color: #fff;
}

.navbar-user > a.dropdown-toggle {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.navbar-user > a.dropdown-toggle .image.image-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.navbar-user > a.dropdown-toggle .image.image-icon i {
  margin: 0 !important;
  float: none !important;
  line-height: 1;
}
.navbar-user > a.dropdown-toggle span {
  display: inline-flex !important;
  align-items: center;
  line-height: 1;
}
.navbar-user .dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.navbar-user .dropdown-menu .dropdown-item i.fa-fw {
  flex-shrink: 0;
  line-height: 1;
}

.navbar-mobile-toggler i {
  font-size: 18px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
}

#header .header-box {
  display: flex;
  align-items: center;
  min-height: 54px;
}

.navbar-header {
  display: flex;
  align-items: center;
}
.navbar-header ul.navbar-nav {
  display: flex;
  align-items: center;
}
.navbar-header .navbar-brand {
  flex-shrink: 0;
}
.navbar-header .navbar-nav {
  list-style: none;
  display: none !important;
}
@media (max-width: 575.98px) {
  .navbar-header .navbar-nav {
    display: flex !important;
    justify-content: left;
  }
  .navbar-header .navbar-nav .dropdown-toggle {
    color: #fff !important;
  }
  .navbar-header .navbar-nav .open .dropdown-menu {
    min-width: 100px;
  }
}
@media (max-width: 575.98px) {
  .navbar-header ul li .dropdown-toggle {
    line-height: initial !important;
    padding: 0 !important;
  }
  .navbar-header ul li .dropdown-toggle a .name {
    color: #fff !important;
  }
}

.multiFiles .table-hover td a svg {
  color: #fff !important;
}

@media (max-width: 567px) {
  #header .header-box {
    display: block;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    grid-gap: 5px;
  }
  .fadeInRight {
    padding-top: 0;
  }
  .fadeInRight li a {
    display: inline-block;
    padding: 5px !important;
  }
}
.form-control {
  height: 40px;
}

@media (max-width: 767px) {
  .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
  .navbar-form .form-control,
  .navbar-form .form-control:focus {
    margin: 0;
    width: 180px !important;
    -webkit-animation: none !important;
    animation: none !important;
  }
  .navbar-nav > li > a {
    line-height: 20px;
    padding: 17px 10px;
  }
  .page-header {
    margin-top: 25px;
  }
}
@media (max-width: 425px) {
  .navbar-nav.ms-auto .navbar-user .navbar-language .dropdown-menu {
    right: 0;
    left: auto;
  }
  .navbar-nav.ms-auto .navbar-user .dropdown-menu {
    right: auto;
    left: 0;
  }
  div.input-group.input-daterange {
    display: block !important;
  }
  div.input-group.input-daterange > span.input-group-addon {
    margin: 2px 0;
    display: table;
    width: 100%;
  }
}
@media (max-width: 320px) {
  .navbar-nav.ms-auto .navbar-user .navbar-language .dropdown-menu {
    right: 0;
    left: auto;
  }
  .navbar-nav.ms-auto .navbar-user .dropdown-menu {
    right: auto;
    left: 0;
  }
}
@media (max-width: 1200px) {
  .smaller-than-1280-full {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .files audio,
  .files video {
    max-width: 144px !important;
  }
}
@media (max-width: 480px) {
  .hide-on-phones {
    display: none !important;
  }
  .show-on-phones-only {
    display: block !important;
  }
}
.no-margin {
  margin: 0;
}

.register.register-with-news-feed .register-header {
  padding: 30px 60px 0;
}

.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
  padding-right: 10px !important;
  line-height: initial !important;
}

.page-header small {
  font-size: 60%;
  color: #7a7a7a;
  font-weight: bold;
}

.show-my-store {
  color: #fff;
  font-size: 11px;
  float: right;
}
.show-my-store a {
  border: 1px solid #a8acb1;
  height: 35px;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center;
  color: #a8acb1;
  border-radius: 4px;
  opacity: 1 !important;
  font-weight: bold;
  white-space: nowrap;
}
.show-my-store a:hover {
  color: #333 !important;
  background-color: #fff !important;
  border: 1px solid #fff;
  opacity: 1 !important;
}
.show-my-store svg, .show-my-store i {
  margin: 0 5px;
  font-size: 14px;
}
.show-my-store a:hover svg {
  color: #333;
}

#header .user-box .dropdown-menu a {
  padding: 7px 10px;
  color: #4c4c4c;
}
#header .user-box .dropdown-menu a svg, #header .user-box .dropdown-menu a i {
  font-size: 12px;
  color: #4c4c4c;
}
#header .user-box .dropdown-menu .divider {
  margin: 2px 0 0 0;
}
#header .user-box .nav {
  display: inline-flex;
  align-items: center;
}

.app-header .navbar-nav > li .dropdown-menu:not(.notif-panel):not(.acc) a {
  padding: 8px 5px;
}

@media (max-width: 567px) {
  .navbar-nav {
    width: 100%;
  }
  body.rtl .navbar-nav > li > a {
    padding: 10px 8px;
  }
  body.rtl .ms-auto li {
    float: none;
  }
  .show-my-store {
    font-size: 9px;
  }
  .show-my-store svg {
    margin: 0 3px;
    font-size: 10px;
  }
  .show-my-store a {
    padding: 0 6px 0 6px !important;
  }
  #header .col-12 {
    padding: 0 10px 0 0;
  }
  #header .user-box {
    padding: 5px;
  }
  #header .user-box .navbar-nav {
    display: flex;
    justify-content: center;
  }
  #header .user-box .navbar-user .dropdown-toggle {
    padding: 9px 5px;
    display: flex;
    align-items: center;
    grid-gap: 5px;
  }
  #header .user-box .navbar-user .dropdown-menu {
    top: 110%;
    padding: 0 !important;
  }
  #header .user-box .navbar-user .dropdown-menu a {
    padding: 5px 10px;
  }
  #header .header-box .head-search .form-control {
    height: 35px !important;
  }
  #header .header-box .head-search .btn.btn-info {
    height: 35px !important;
  }
  #header .navbar-toggler {
    display: grid;
    margin: 10px 20px 10px 30px;
  }
}
.header-box .head-search .form-control {
  border: none;
  height: 40px;
  width: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-color: #e2e7eb;
}
.header-box .head-search .input-group-btn {
  width: 100%;
}
.header-box .head-search .input-group-btn .input-box {
  position: relative;
  width: 50%;
  margin-right: -1px;
}
.header-box .head-search .input-group-btn .input-box .remove-filtration {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 3px;
  margin: 0;
}
.header-box .head-search .input-group-btn .input-box .remove-filtration svg, .header-box .head-search .input-group-btn .input-box .remove-filtration i {
  font-size: 9px;
}
.header-box .head-search .input-group-btn .btn-option {
  height: 40px;
  width: 100px;
  border-radius: 0;
  border: none;
  text-align: right;
  position: relative;
  display: flex;
  align-items: center;
  background-color: #d9e0e7;
  color: #514f4f;
  font-weight: bold;
}
.header-box .head-search .input-group-btn .btn-option .caret {
  position: absolute;
  left: 10px;
}
.header-box .head-search .input-group-btn .dropdown-menu {
  min-width: 100px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: 0;
}
@media (max-width: 1024px) {
  .header-box .head-search .input-group-btn .input-box {
    width: 80%;
  }
}
@media (max-width: 567px) {
  .header-box .head-search {
    margin-top: 7px;
  }
  .header-box .head-search .input-group-btn .input-box {
    width: 100%;
  }
}
@media (max-width: 567px) {
  .header-box .head-search .input-group-btn .btn-option {
    width: 70px;
    font-size: 8px;
    padding-right: 0;
  }
}

.head-search .input-group-btn select option:hover {
  background-color: #d9dfe4;
}

.ltr .header-box .head-search .input-group-btn input {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.ltr .header-box .head-search .input-group-btn button {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.ltr .header-box .head-search .input-box .remove-filtration {
  left: initial;
  right: 3px;
}
.ltr .header-box .head-search .btn-option {
  padding-left: 5px;
}

@media (max-width: 567px) {
  .control-discount .form-control {
    margin-left: 0 !important;
  }
  .form-control {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  #header .user-box .nav {
    grid-gap: 10px;
  }
}
@media (min-width: 767.98px) {
  #header .header-box {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-gap: 10px;
  }
  #header .user-box .nav {
    float: none !important;
    grid-gap: 10px;
  }
  #header .user-box .nav a span {
    max-width: 100%;
  }
}
@media (min-width: 991.98px) {
  #header .header-box {
    flex-direction: row;
  }
  #header .user-box .nav {
    float: left !important;
  }
  #header .user-box .nav {
    grid-gap: 10px;
  }
  #header .user-box .nav a {
    display: flex;
    align-items: center;
    grid-gap: 5px;
  }
  #header .user-box .nav a svg, #header .user-box .nav a i {
    margin: 0;
  }
}
.mobile-nav {
  display: none;
}

@media (max-width: 767.98px) {
  #content.app-content {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
  }
  .mobile-nav {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 4px;
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--card-line, #e6eaf0);
    box-shadow: 0 -6px 20px rgba(20, 30, 40, 0.08);
  }
  .mobile-nav .nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink-dim, #7a8896);
    transition: color 0.16s ease, background 0.16s ease, transform 0.1s ease;
  }
  .mobile-nav .nav-item .nav-icon {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.16s ease;
  }
  .mobile-nav .nav-item .nav-text {
    max-width: 100%;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-nav .nav-item:active {
    background: rgba(52, 143, 226, 0.08);
    transform: scale(0.96);
  }
  .mobile-nav .nav-item.active {
    color: #348fe2;
  }
  .mobile-nav .nav-item.active .nav-icon {
    transform: translateY(-1px);
  }
}
.app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) {
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 6px;
  min-height: 74px;
}
.app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) .info {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) .info .store-name-link {
  display: block;
  text-align: start;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 3px;
}
.app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) .info small a, .app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) .info .visitWebsite {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}
.app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) .info small a:hover, .app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) .info .visitWebsite:hover {
  color: rgba(255, 255, 255, 0.8);
}
.app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) .image {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}
.app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) .image a {
  display: flex;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.app-sidebar .menu .menu-profile:not(.sidebar-eco-profile) .image a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.app-sidebar .menu-header {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.55;
  padding: 10px 16px 4px;
}
.app-sidebar .menu-submenu .menu-link::before {
  content: initial;
}
.app-sidebar .menu .menu-item .menu-link {
  padding: 12px 20px 12px 5px;
  font-size: 14px;
  border-top: none !important;
  border-bottom: none !important;
  transition: background 0.15s ease, padding-inline-start 0.15s ease;
}
.app-sidebar .menu .menu-item .menu-link svg, .app-sidebar .menu .menu-item .menu-link i {
  font-size: 16px;
  width: auto;
  flex-shrink: 0;
}
.app-sidebar .menu .menu-item .menu-link .menu-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-inline-start: auto;
  background: #ff5b57;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1;
  flex-shrink: 0;
}
.app-sidebar .menu .menu-item .menu-link .menu-badge-new {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  margin-inline-start: auto;
  background: #348fe2;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 7px;
  white-space: nowrap;
  box-shadow: none !important;
  flex-shrink: 0;
  animation: badgePulse 2.8s ease-in-out infinite;
}
.app-sidebar .menu .menu-item .menu-link .menu-badge-new i, .app-sidebar .menu .menu-item .menu-link .menu-badge-new svg {
  width: auto;
  font-size: 10px;
}
@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 18px rgba(236, 72, 153, 0.65), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
}
.app-sidebar .menu-submenu .menu-item .menu-link {
  padding: 8px 14px 8px 46px;
  font-size: 13px;
  border-bottom: none;
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 575px) {
  .app-sidebar {
    width: 220px;
  }
}

.sidebar-eco-profile {
  padding: 35px 10px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  text-align: start;
  position: relative;
  overflow: visible;
  background: linear-gradient(135deg, rgba(52, 143, 226, 0.2) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 6px;
  min-height: 78px;
}
.sidebar-eco-profile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(52, 143, 226, 0.18) 0%, transparent 65%);
  pointer-events: none;
}
.sidebar-eco-profile .image, .sidebar-eco-profile .info {
  position: relative;
}
.sidebar-eco-profile .image {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
.sidebar-eco-profile .image .fa-store-alt {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.48);
}
.sidebar-eco-profile .image a {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  border: 1.5px solid rgba(52, 143, 226, 0.55);
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.12), 0 2px 10px rgba(0, 0, 0, 0.35);
  margin: 0 !important;
  display: flex;
  overflow: hidden;
}
.sidebar-eco-profile .image a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.sidebar-eco-profile .image .package_liable {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  height: 18px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  border: 2.5px solid #2d353c;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.sidebar-eco-profile .image .package_liable i {
  font-size: 8.5px;
}
.sidebar-eco-profile .image .package_liable.pro {
  background: linear-gradient(135deg, #fbbf24, #f9c02e);
  color: #271c01;
}
.sidebar-eco-profile .image .package_liable.launch {
  background: linear-gradient(135deg, #5aa6e8, #348fe2);
  color: #fff;
}
.sidebar-eco-profile .image .package_liable.start {
  background: linear-gradient(135deg, #5b6ef5, #344fe2);
  color: #fff;
}
.sidebar-eco-profile .info {
  flex: 1;
  min-width: 0;
}
.sidebar-eco-profile .info .store-name-link {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  line-height: 1.2;
  margin-bottom: 8px;
}
.sidebar-eco-profile .info .visit-store-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.sidebar-eco-profile .info .visit-store-container .visitWebsite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.sidebar-eco-profile .info .visit-store-container .visitWebsite small {
  font-size: 10.5px;
}
.sidebar-eco-profile .info .visit-store-container .visitWebsite i {
  font-size: 9px;
  opacity: 0.75;
}
.sidebar-eco-profile .info .visit-store-container .visitWebsite:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}
.sidebar-eco-profile .info .visit-store-container .share-button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.52);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 26px;
  border-radius: 6px;
  font-size: 10px;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-eco-profile .info .visit-store-container .share-button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.sidebar-eco-profile .info .visit-store-container .dropdown {
  position: relative;
  display: inline-block;
}
.sidebar-eco-profile .info .visit-store-container .dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 145px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 4px;
  border-radius: 10px;
  inset-inline-start: 0;
  top: 32px;
  z-index: 1050;
}
.sidebar-eco-profile .info .visit-store-container .dropdown-content a {
  text-decoration: none;
  color: #374151;
  font-size: 12px;
  padding: 8px 10px;
  text-align: start;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 7px;
}
.sidebar-eco-profile .info .visit-store-container .dropdown-content a i {
  font-size: 13px;
  color: #6b7280;
  flex-shrink: 0;
}
.sidebar-eco-profile .info .visit-store-container .dropdown-content a:hover {
  background: #f0f7ff;
  color: #1d4ed8;
}
.sidebar-eco-profile .info .visit-store-container .dropdown-content a:hover i {
  color: #3b82f6;
}
.sidebar-eco-profile .info .visit-store-container .hidden-copy {
  position: absolute;
  inset-inline-start: -9999px;
}

[data-toggle=app-sidebar-minify] svg, [data-toggle=app-sidebar-minify] i {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.app-sidebar-minified [data-toggle=app-sidebar-minify] svg, .app-sidebar-minified [data-toggle=app-sidebar-minify] i {
  transform: rotate(0deg);
}

.menu-item.d-flex {
  margin-top: 8px;
}
.menu-item.d-flex .app-sidebar-minify-btn {
  padding: 10px 16px;
}

#sidebar .menu-item.has-sub .menu-submenu .menu-link svg, #sidebar .menu-item.has-sub .menu-submenu .menu-link i {
  width: 18px !important;
}

.app-sidebar-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1039;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}

.app-sidebar-mobile-toggled .app-sidebar-mobile-backdrop {
  display: block;
  animation: backdropFadeIn 0.22s ease forwards;
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.app-sidebar-mobile-close {
  display: none;
}

.app-sidebar-mobile-toggled .app-sidebar [data-dismiss=app-sidebar-mobile] {
  position: absolute;
  inset-inline-end: -44px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: rgba(15, 15, 15, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.app-sidebar-mobile-toggled .app-sidebar [data-dismiss=app-sidebar-mobile] i, .app-sidebar-mobile-toggled .app-sidebar [data-dismiss=app-sidebar-mobile] svg {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
}
.app-sidebar-mobile-toggled .app-sidebar [data-dismiss=app-sidebar-mobile]:hover {
  background-color: rgba(0, 0, 0, 0.88) !important;
  opacity: 1 !important;
}

@media (max-width: 767px) {
  .app-sidebar-content {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}
:root {
  --shell: #2d353c;
  --shell-darker: #262d33;
  --shell-hover: rgba(255, 255, 255, .06);
  --shell-active: rgba(52, 143, 226, 0.16);
  --shell-line: rgba(255, 255, 255, .07);
  --shell-line-strong: rgba(255, 255, 255, .12);
  --shell-txt: rgba(255, 255, 255, .92);
  --shell-txt-mid: rgba(255, 255, 255, .62);
  --shell-txt-dim: rgba(255, 255, 255, .42);
}

.app-header {
  background: var(--shell);
  box-shadow: none;
  transition: box-shadow 0.25s ease;
  position: relative;
}
.app-header::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  pointer-events: none;
  z-index: 1;
}
.app-header.scrolled {
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
}
.app-header .navbar-header {
  border-inline-end: 1px solid var(--shell-line);
}
.app-header > .navbar-nav {
  padding-inline: 25px;
}
.app-header .navbar-form {
  padding: 0 15px;
  margin-block: 5px;
  margin-inline: 0 auto;
}

.h-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  color: var(--shell-txt-mid, rgba(255, 255, 255, 0.62));
  transition: background 0.16s ease, color 0.16s ease;
  cursor: pointer;
}
.h-icon-btn i {
  font-size: 16px;
}
.h-icon-btn:hover {
  background: var(--shell-hover, rgba(255, 255, 255, 0.06));
  color: var(--shell-txt, #fff);
}
.h-icon-btn[aria-expanded=true], .h-icon-btn.active {
  background: var(--shell-active, rgba(52, 143, 226, 0.16));
  color: #fff;
}

.navbar-brand.brand-shanta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 15px;
}
.navbar-brand.brand-shanta .brand-logo {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.navbar-brand.brand-shanta .brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}
.navbar-brand.brand-shanta .brand-wordmark b {
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  letter-spacing: -0.01em;
}
.navbar-brand.brand-shanta .brand-wordmark small {
  font-size: 10px;
  font-weight: 600;
  color: var(--shell-txt-dim, rgba(255, 255, 255, 0.42));
  margin-top: 1px;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .navbar-brand.brand-shanta {
    gap: 0;
    padding-inline: 10px;
  }
  .navbar-brand.brand-shanta .brand-wordmark {
    display: none;
  }
}

.nav-more,
.nav-more-wrap {
  display: contents;
}

.app-header .navbar-nav > li.nav-more > a.nav-more-toggle {
  display: none;
}

.h-icon-btn .nav-label {
  display: none;
}

@media (max-width: 991.98px) {
  .nav-more {
    display: block;
    position: relative;
  }
  .app-header .navbar-nav > li.nav-more > a.nav-more-toggle {
    display: flex;
  }
  .nav-more-wrap {
    display: none;
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    min-width: 230px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--card-line, #e6eaf0);
    border-radius: 14px;
    box-shadow: 0 18px 50px -12px rgba(15, 23, 32, 0.4), 0 4px 14px rgba(0, 0, 0, 0.15);
    z-index: 1100;
  }
  .nav-more.open .nav-more-wrap {
    display: block;
    animation: navMoreIn 0.18s ease both;
  }
  @keyframes navMoreIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .nav-more-wrap > li {
    display: block;
    width: 100%;
    position: static;
  }
  .nav-more-wrap > li > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink, #2c3540) !important;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-more-wrap > li > a i {
    font-size: 16px;
    width: 22px;
    text-align: center;
    color: var(--ink-dim, #7a8896);
  }
  .nav-more-wrap > li > a:hover {
    background: #f1f6fc;
  }
  .nav-more-wrap .nav-label {
    display: inline !important;
  }
  .nav-more-wrap .navbar-language .caret {
    margin-inline-start: auto;
  }
}
.app-sidebar {
  box-shadow: none;
  border-top: 0;
}

.index .contact-us form, .index .services .item {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.panels-button, .cards-button, button, .btn-head, .contac-button, .shipping-company .card-box a:hover h5, .option-value-delete:hover, .option-delete:hover, .position-right a, .position-left a {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

tr td .custom-control.custom-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 3px 12px 3px;
}
tr div .custom-control-input,
tr div .selectall-checkbox {
  width: 18px;
  height: 18px;
}

thead tr th {
  padding: 10px 5px;
  height: 50px;
  background-color: #f6f6f6;
}

tbody .gradeX tr {
  padding: 4px;
}
tbody .gradeX:hover {
  background-color: #ebf8ff;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  vertical-align: middle;
  border-color: #e9eef2;
  padding: 5px;
}

.table > tbody > tr > td a,
.table > tbody > tr > th a,
.table > tfoot > tr > td a,
.table > tfoot > tr > th a,
.table > thead > tr > td,
.table > thead > tr > th a {
  text-decoration: none;
  color: #337ab7;
  font-weight: bold;
}

.table > tbody > tr > td a:hover,
.table > tbody > tr > th a:hover,
.table > tfoot > tr > td a:hover,
.table > tfoot > tr > th a:hover,
.table > thead > tr > td:hover,
.table > thead > tr > th a:hover {
  color: #337ab7;
}

.table > tbody > tr > td .img-box,
.table > tbody > tr > th .img-box,
.table > tfoot > tr > td .img-box,
.table > tfoot > tr > th .img-box,
.table > thead > tr > td .img-box,
.table > thead > tr > th .img-box {
  width: 65px;
  height: 60px;
  display: block;
  margin: auto;
  border-radius: 7px;
  border: 1px solid #e9e9e9;
}

.table > tbody > tr > td .img-box img,
.table > tbody > tr > th .img-box img,
.table > tfoot > tr > td .img-box img,
.table > tfoot > tr > th .img-box img,
.table > thead > tr > td .img-box img,
.table > thead > tr > th .img-box img {
  width: 100%;
  height: 100%;
}

.table > tbody > tr > td .label,
.table > tbody > tr > th .label,
.table > tfoot > tr > td .label,
.table > tfoot > tr > th .label,
.table > thead > tr > td .label,
.table > thead > tr > th .label {
  font-size: 80%;
  margin: 2px 1px;
  padding: 5px 8px;
}

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

.table > thead:first-child > tr:first-child > th {
  font-size: 13px;
  font-weight: bold;
}

.table > tbody > tr > td a.label:hover {
  color: #fff !important;
}

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

.small,
small {
  font-size: 70%;
}

.item-pin .pin_btn {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  background-color: #d9e0e7;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.item-pin .pin_btn svg, .item-pin .pin_btn i {
  font-size: 12px;
  color: #5c5a5b;
}

.pinned {
  background-color: #348fe2 !important;
  color: #fff !important;
  cursor: pointer;
}
.pinned svg, .pinned i {
  color: #fff !important;
}

.pinned,
.pin_btn.active,
.pin_btn:active {
  background-color: #348fe2;
  color: #fff;
  cursor: pointer;
}

.pin_btn:active svg,
.pinned:active svg,
.pin_btn:active i,
.pinned:active i {
  color: #fff;
}

.img-box {
  font-size: 10px;
  overflow: hidden;
}

.branches {
  background-color: rgba(239, 248, 255, 0.7803921569);
}
.branches a {
  font-weight: 500 !important;
}
.branches .img-box {
  width: 50px !important;
  height: 40px !important;
  margin-left: 0 !important;
}

.nested-sortable .fa-arrows-alt {
  font-size: 20px;
}
.nested-sortable .branches .fa-arrows-alt {
  font-size: 16px;
}

.move-icon img {
  width: 16px;
  cursor: pointer;
}

.width-35 {
  width: 25px !important;
}

.taxonomy-column a {
  display: block;
  margin-bottom: 7px;
}
.taxonomy-column .label, .taxonomy-column .badge {
  background-color: #d9e0e7;
  display: inline-flex;
  color: #514f4f;
}
.taxonomy-column .badge-taxonomy {
  margin-bottom: 0;
}
.taxonomy-column .badge-taxonomy[href]:focus, .taxonomy-column .badge-taxonomy[href]:hover {
  background-color: #348fe2;
  color: #fff;
}

.panel-inverse > .card-header {
  width: 100%;
  margin: auto;
  min-height: 45px;
  position: relative;
  align-items: center;
}

@media (max-width: 567px) {
  .panel-inverse > .card-header h4 {
    color: #fff !important;
  }
  .table > thead > tr > th {
    border-bottom: 2px solid #7f9fb9 !important;
  }
  .card-body {
    overflow: inherit;
  }
  .card-body .table {
    width: max-content;
    max-width: max-content;
  }
  .card-body .table .product-tit-column {
    width: 280px;
    display: inline-block;
    border-bottom: none;
  }
  .card-body .table .product-tit-column a:first-of-type {
    width: 280px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .card-body .table .product-order-title {
    width: 280px;
    border-bottom: none;
    height: 65px;
    display: inline-flex;
    align-items: center;
  }
  .card-body .table .product-order-title a:first-of-type {
    width: 280px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
  }
  .table > tbody > tr > td {
    font-size: 12px;
  }
  .table > thead:first-child > tr:first-child > th {
    font-size: 10px;
  }
  .table thead tr .product-title-status,
  .table thead tr .product-title-quantity {
    width: 60px !important;
  }
  .table thead tr .product-title-control {
    width: 180px !important;
  }
  .gradeX .btn-group-sm > .btn, .gradeX .btn-sm {
    padding: 5px 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
}
@media (max-width: 1024px) {
  .card-body .table {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 1365px) {
  .table > thead > tr > th {
    border-bottom: 2px solid #7f9fb9 !important;
  }
  .table > tbody > tr > td {
    font-size: 12px;
  }
  .card-body {
    overflow: auto;
  }
  .card-body .table .product-tit-column {
    width: 280px;
    display: inline-block;
    border-bottom: none;
  }
  .card-body .table .product-tit-column a:first-of-type {
    width: 280px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .card-body .table .product-order-title {
    width: 280px;
    border-bottom: none;
    height: 65px;
    display: inline-flex;
    align-items: center;
  }
  .card-body .table .product-order-title a:first-of-type {
    width: 280px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
  }
  .table > thead:first-child > tr:first-child > th {
    font-size: 10px;
  }
  .table > tbody > tr > td .img-box,
  .table > tbody > tr > th .img-box,
  .table > tfoot > tr > td .img-box,
  .table > tfoot > tr > th .img-box,
  .table > thead > tr > td .img-box,
  .table > thead > tr > th .img-box {
    width: 65px;
    height: 55px;
  }
  .table thead tr .product-title-status,
  .table thead tr .product-title-quantity {
    width: 60px !important;
  }
  .table thead tr .product-title-control {
    width: 180px !important;
  }
  .gradeX .btn-group-sm > .btn,
  .gradeX .btn-sm {
    padding: 5px 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
}
.edits-items-table a {
  color: #fff;
  font-weight: bold;
}
.edits-items-table .dropdown-menu {
  top: 30px;
}

.items-delete {
  color: #d9534f !important;
  border: none;
  background: transparent;
  margin: 0;
  margin-right: auto;
  display: flex;
  align-items: center;
  padding-left: 20px;
  grid-gap: 10px;
  z-index: 100;
}
.items-delete svg, .items-delete i {
  color: #cc4946 !important;
}

.dropdown-menu .items-delete {
  padding-left: 0;
  gap: 0;
  margin-right: 0;
  width: 100%;
}

.sortable-chosen .items-delete {
  position: relative;
  z-index: 15;
}

.gradeX .btn-group-sm > .btn,
.gradeX .btn-sm {
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1.6;
}
.gradeX .user-icon {
  font-size: 20px;
}

.order-inner-list .gradeX {
  font-weight: bold;
}

.table_full {
  table-layout: fixed;
}
.table_full td,
.table_full th {
  text-overflow: ellipsis;
}

.nowrap {
  white-space: nowrap;
}

/*
 * YallaGroup RTL SCSS Overrides (Cleaned for v5.5.2)
 * ===================================================
 * Removed: .card-header/.card-title RTL, .pull-left/.pull-right RTL,
 *          .form-group RTL — all handled by v5.5.2 native RTL
 *
 * Kept: dropzone AR images, .note border direction, search input padding
 */
/* Dropzone Arabic placeholder images */
body.rtl .dropzone .dz-default.dz-message {
  background-image: url("../../plugins/yallaUploader/dropZone/images/additional-ar.png");
  background-size: cover;
  background-position: center;
  right: 0;
  left: 0;
  width: 100%;
}

body.rtl .main-img-dropzone .img-box .dropzone .dz-default.dz-message {
  background-image: url("../../plugins/yallaUploader/dropZone/images/main-ar.png");
  background-size: cover;
  background-position: center;
  height: 100%;
}

/* Module-specific RTL fixes */
.rtl .note {
  border-right: 3px solid;
  border-left: initial;
}
.rtl .head-search .form-control {
  padding-left: 20px;
}

body.ltr .dropzone .dz-default.dz-message {
  background-image: url("../../plugins/yallaUploader/dropZone/images/additional-en.png");
  left: 0;
  right: 0;
  margin-left: 0;
  width: 100%;
}

body.ltr .main-img-dropzone .img-box .dropzone .dz-default.dz-message {
  background-image: url("../../plugins/yallaUploader/dropZone/images/main-en.png");
  height: 100%;
}

.ltr {
  font-family: "Droid Arabic Kufi", "DroidArabicKufiBold", "DroidArabicKufiRegular", serif;
  text-align: left;
  direction: ltr;
}
.ltr .card-header .card-title a {
  float: left;
  margin-right: 10px;
  margin-left: 0;
}
.ltr .form-group {
  text-align: left;
}
.ltr .note {
  border-right: initial;
  border-left: 3px solid;
}
.ltr .head-search .btn-option.form-control {
  padding-right: 20px;
  padding-left: 0;
}
.ltr .justify-left {
  justify-content: right;
}
.ltr .justify-right {
  justify-content: left;
}
.ltr .pull-right {
  float: right;
}
.ltr .pull-left {
  float: left;
}
.ltr .widget-stats .stats-link a svg, .ltr .widget-stats .stats-link a i {
  left: initial;
  right: 10px;
  transform: rotate(180deg);
}
.ltr .dropdown_Menu_actions .dropdown-menu li .dropdown-item, .ltr #dropdown_Menu_actions .dropdown-menu li .dropdown-item {
  text-align: left !important;
}
.ltr .icons-size .dropdown-menu {
  right: 0;
  left: initial;
  float: left;
}
.ltr .icons-size .dropdown-menu li a, .ltr .icons-size .dropdown-menu li button {
  text-align: left;
  height: auto;
}
.ltr .icons-size .dropdown-menu li svg, .ltr .icons-size .dropdown-menu li i {
  margin-right: 5px;
}
.ltr .icons-size svg, .ltr .icons-size i {
  color: #77848e;
  font-size: 18px;
}
.ltr .icons-size .btn:active,
.ltr .icons-size .btn-group.open .dropdown-toggle {
  box-shadow: none;
  border: 1px solid #77848e !important;
}
.ltr div.dataTables_info {
  float: left !important;
  margin: 0 10px;
}
.ltr .website-settings .form-group .checkbox {
  text-align: right;
}
.ltr .card-body .form-group .color-select-container {
  justify-content: left;
}
.ltr .form-control[disabled],
.ltr .form-control[readonly] fieldset[disabled] .form-control {
  background: #f4f4f4;
  border: none;
  opacity: 1;
}
.ltr .card-body .input-group .lang-label {
  position: absolute;
  right: 0;
  left: initial;
  margin-left: 0;
  margin-right: initial;
}
.ltr .branches td a svg, .ltr .branches td a i {
  transform: rotate(180deg);
}
.ltr .input-container {
  padding: 25px 0 25px 25px;
}
.ltr .discount-remove {
  right: -25px;
  left: initial !important;
}
.ltr .text-right {
  text-align: left !important;
}
.ltr .text-left {
  text-align: right !important;
}
.ltr .m-r-20 {
  margin-left: 20px !important;
  margin-right: initial !important;
}

.activity-log .img-box {
  width: 35px;
  height: 35px;
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.activity-log .img-box svg, .activity-log .img-box i {
  font-size: 30px;
}
.activity-log table tr th {
  background-color: #D9F0FF;
}
.activity-log table tr td .img-box {
  width: 70%;
  height: auto;
}
.activity-log table tr td .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.activity-log table tr td,
.activity-log table tr th {
  padding: 10px;
  border-color: #e1e1e1;
}
.activity-log .log-content {
  width: 80%;
  margin: auto;
  font-size: 13px;
  color: #000;
  padding: 0 30px;
  background-color: #ebf8ff;
}
.activity-log .log-content .accordion-toggle svg, .activity-log .log-content .accordion-toggle i {
  font-size: 16px;
}
.activity-log .log-content .card-body h6 {
  font-weight: bold;
  margin-bottom: 10px;
}
.activity-log #limited_log {
  font-family: "Cairo", Tahoma, sans-serif !important;
  font-size: 14px !important;
  min-height: 10px;
  max-height: 525px;
  overflow-y: scroll;
  position: relative;
  width: 100%;
  display: inline-block;
  list-style: none;
}
.activity-log #limited_log li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.activity-log #limited_log li:hover {
  background-color: #ebf8ff;
}
.activity-log #limited_log tr {
  width: 100%;
}
.activity-log #limited_log .log-time {
  position: absolute;
  left: 10px;
  font-size: 11px;
}
.activity-log #limited_log .log-time a {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  margin: 0 10px;
}
.activity-log .button-more {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.activity-log .button-more button {
  z-index: 5;
  transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1);
  margin: 10px 15px;
  font-size: 12px;
  height: 34px;
  padding: 0 20px;
  font-weight: normal;
  border-radius: 23px;
  background-color: #2d353c;
  color: #fff;
}
.activity-log .button-more button:hover {
  background-color: #333;
  color: #fff;
}
.activity-log .button-more::before {
  content: "";
  display: inline-block;
  flex: 1;
  background: #f2f2f2;
  height: 1px;
}
.activity-log .button-more::after {
  content: "";
  display: inline-block;
  flex: 1;
  background: #f2f2f2;
  height: 1px;
  color: #fff;
}
.activity-log .current {
  max-height: max-content !important;
  transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1);
}
.activity-log .liner-back {
  display: block;
  width: 100%;
  height: 100px;
  background: #fafafa;
  background: linear-gradient(0deg, #fff, rgba(250, 250, 250, 0));
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1);
  pointer-events: none;
}
.activity-log ul.current .liner-back {
  opacity: 0;
}
.activity-log .log-info-content {
  background-color: #d9e0e7;
  padding: 10px;
  margin-top: 10px;
}

.ltr .activity-log #limited_log .log-time {
  right: 10px;
  left: initial;
}
.ltr .activity-log .liner-back {
  left: 0;
  right: initial;
}

/*end header style*/
/*start pages style*/
.index .about {
  padding: 50px 0;
}
.index .about .img-box {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  overflow: hidden;
}
.index .about .info span {
  font-weight: bold;
  color: #348fe2;
  font-size: 14px;
}
.index .about .info h2 {
  font-weight: bold;
  color: #2d353c;
  font-size: 35px;
  margin-bottom: 15px;
}
.index .about .info p {
  font-size: 16px;
  color: #2d353c;
  max-height: 45px;
  overflow: hidden;
  line-height: 1.3;
  margin-bottom: 10px;
}
.index .about .info .idea {
  background-color: #E2F6FF;
  padding: 10px;
  border-radius: 12px;
  display: flex;
}
.index .about .info .idea svg {
  color: #348fe2;
  font-size: 25px;
  margin: 4px 10px;
}
.index .about .info .idea div h3 {
  font-size: 20px;
  font-weight: bold;
  color: #2d353c;
  min-height: 30px;
  max-height: 30px;
  overflow: hidden;
  margin-bottom: 0;
}
.index .about .info .idea div p {
  margin-bottom: 0;
  color: #2d353c;
}
@media (max-width: 767.98px) {
  .index .about {
    padding: 30px 0;
  }
  .index .about .img-box {
    width: 100%;
    height: 250px;
  }
  .index .about .info span {
    font-size: 14px;
  }
  .index .about .info h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .index .about .info p {
    font-size: 14px;
    max-height: 55px;
    margin-bottom: 10px;
  }
  .index .about .info .idea {
    margin-bottom: 20px;
  }
  .index .about .info .idea svg {
    font-size: 25px;
    margin: 3px 8px;
  }
  .index .about .info .idea div h3 {
    font-size: 16px;
    min-height: 20px;
    max-height: 20px;
  }
}
.index .green {
  background-image: url("../images/img/factory.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  background-origin: content-box;
  background-clip: content-box;
  position: relative;
  height: 500px;
}
.index .green .overlay {
  background-color: rgba(37, 55, 69, 0.4705882353);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.index .green .content {
  width: 70%;
  margin: auto;
  text-align: center;
}
.index .green .content h2 {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}
.index .green .content p {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.index .green .content a {
  background-color: #F79737;
  height: 45px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}
@media (max-width: 767.98px) {
  .index .green {
    height: 400px;
  }
  .index .green .content {
    width: 90%;
  }
  .index .green .content h2 {
    font-size: 30px;
  }
  .index .green .content p {
    font-size: 16px;
  }
  .index .green .content a {
    height: 45px;
    padding: 0 15px;
    font-size: 14px;
    width: 45%;
  }
}
.index .services {
  padding: 50px 0 100px;
}
.index .services .head-content span {
  color: #348fe2;
  font-size: 16px;
  font-weight: bold;
  min-height: 20px;
  max-height: 20px;
  overflow: hidden;
}
.index .services .head-content h2 {
  font-weight: bold;
  color: #2d353c;
  font-size: 35px;
  width: 65%;
  overflow: hidden;
  margin-bottom: 20px;
}
@media (max-width: 767.98px) {
  .index .services .head-content {
    padding: 15px;
  }
}
.index .services .item {
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
}
.index .services .item .img-box {
  width: 100%;
  height: 160px;
  border-radius: 10px;
}
.index .services .item .info {
  padding: 5px;
}
.index .services .item .info h2 {
  color: #2d353c;
  font-weight: bold;
  font-size: 20px;
  min-height: 25px;
  max-height: 25px;
  overflow: hidden;
  margin-bottom: 4px;
}
.index .services .item .info p {
  font-size: 14px;
  color: #2d353c;
  min-height: 60px;
  max-height: 60px;
  overflow: hidden;
  margin-bottom: 0;
  line-height: 1.4;
}
@media (max-width: 767.98px) {
  .index .services {
    padding: 30px 0 30px;
  }
  .index .services .row {
    margin: 0 !important;
  }
  .index .services .head-content span {
    font-size: 14px;
  }
  .index .services .head-content h2 {
    font-size: 30px;
    width: 95%;
    margin-bottom: 15px;
  }
  .index .services .item .img-box {
    height: 180px;
  }
  .index .services .item .info h2 {
    font-size: 16px;
  }
  .index .services .item .info p {
    line-height: 1.4;
  }
}
.index .contact-us {
  background-color: #2d353c;
  padding: 50px 0;
}
.index .contact-us .content span {
  color: #348fe2;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
}
.index .contact-us .content h2 {
  font-size: 45px;
  font-weight: bold;
  color: #fff;
  width: 90%;
  margin-bottom: 25px;
}
.index .contact-us .content div {
  margin-bottom: 15px;
}
.index .contact-us .content div svg, .index .contact-us .content div i {
  color: #348fe2;
  font-size: 18px;
}
.index .contact-us .content div span {
  font-size: 16px;
  overflow: hidden;
  color: #fff;
}
@media (max-width: 767.98px) {
  .index .contact-us .content span {
    font-size: 14px;
  }
  .index .contact-us .content h2 {
    font-size: 30px;
    width: 95%;
    margin-bottom: 20px;
  }
  .index .contact-us .content div {
    display: flex;
  }
  .index .contact-us .content div svg, .index .contact-us .content div i {
    font-size: 16px;
  }
  .index .contact-us .content div span {
    font-size: 14px;
    margin: -5px 10px 0;
  }
}
.index .contact-us form {
  margin-top: -120px;
  background-color: #fff;
  padding: 40px 20px;
  border-radius: 10px;
}
.index .contact-us form .form-group {
  margin-bottom: 10px;
}
.index .contact-us form input, .index .contact-us form textarea {
  border-radius: 10px;
  border: none;
  background-color: #DDEEF6;
  font-size: 14px;
}
.index .contact-us form input {
  height: 45px;
}
.index .contact-us form textarea {
  min-height: 100px;
  max-height: 250px;
}
.index .contact-us form ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #348fe2;
  opacity: 1; /* Firefox */
}
.index .contact-us form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #348fe2;
}
.index .contact-us form ::-ms-input-placeholder { /* Microsoft Edge */
  color: #348fe2;
}
.index .contact-us form button {
  background-color: #348fe2;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  height: 45px;
}
@media (max-width: 767.98px) {
  .index .contact-us form {
    margin: 0 1px 20px;
  }
}

.rtl .index .float-left {
  float: right !important;
}

.dashboard-home {
  padding-inline: 0;
}

.dh-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.dh-row > [class*=col-] {
  width: auto;
  max-width: none;
  min-width: 0;
  flex: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .dh-row {
    gap: 15px;
    margin-bottom: 20px;
  }
  .dh-row--1-2 {
    grid-template-columns: 1fr 2fr;
  }
  .dh-row--7-5 {
    grid-template-columns: 7fr 5fr;
  }
  .dh-row--1-1 {
    grid-template-columns: 1fr 1fr;
  }
}

.dashboard-home__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}
@media (max-width: 991px) {
  .dashboard-home__kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .dashboard-home__kpis {
    gap: 9px;
    margin-bottom: 14px;
  }
}

.dh-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #eaeef3;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(18, 38, 63, 0.035), 0 3px 8px rgba(18, 38, 63, 0.035);
}
.dh-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #eaeef3;
}
.dh-card__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}
.dh-card__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 14px;
}
.dh-card__icon--blue {
  color: #348fe2;
  background: #e8f2fc;
}
.dh-card__icon--green {
  color: #00a884;
  background: #e3f7f1;
}
.dh-card__icon--purple {
  color: #8753de;
  background: #f0e9fc;
}
.dh-card__icon--amber {
  color: #b9770a;
  background: #fff4e0;
}
.dh-card__icon--red {
  color: #ff5b57;
  background: #ffeceb;
}
.dh-card__icon--gold {
  color: #d99100;
  background: #fff6e0;
}
.dh-card__icon--cyan {
  color: #0c97b3;
  background: #e2f6fb;
}
.dh-card__more {
  font-size: 12px;
  font-weight: 600;
  color: #7b8794;
}
.dh-card__more--link {
  color: #348fe2;
}
.dh-card__more--action {
  color: #348fe2;
  cursor: pointer;
}
.dh-card__body {
  flex: 1;
  padding: 0 14px;
}
.dh-card--data {
  max-height: 420px;
  padding: 10px 0 0;
}

.kpi-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #ffffff;
  border: 1px solid #eaeef3;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(18, 38, 63, 0.035), 0 3px 8px rgba(18, 38, 63, 0.035);
  padding: 14px;
}
.kpi-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kpi-card__chip {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
}
.kpi-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.kpi-card__pill--soft {
  color: #348fe2;
  background: #e8f2fc;
}
.kpi-card__accent {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: none;
}
.kpi-card__num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #1f2937;
}
.kpi-card__label {
  color: #7b8794;
  font-size: 13px;
}
.kpi-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #eaeef3;
  padding-top: 10px;
  margin-top: auto;
}
.kpi-card__more {
  font-size: 12px;
  font-weight: 600;
  color: #348fe2;
}
.kpi-card__more i {
  margin-inline-start: 3px;
}
.kpi-card__more:hover {
  color: rgb(29.65, 122.6896551724, 207.55);
}
.kpi-card--blue .kpi-card__chip, .kpi-card--blue .kpi-card__accent {
  color: #348fe2;
  background: #e8f2fc;
}
.kpi-card--green .kpi-card__chip, .kpi-card--green .kpi-card__accent {
  color: #00a884;
  background: #e3f7f1;
}
.kpi-card--purple .kpi-card__chip, .kpi-card--purple .kpi-card__accent {
  color: #8753de;
  background: #f0e9fc;
}
.kpi-card--red .kpi-card__chip, .kpi-card--red .kpi-card__accent {
  color: #ff5b57;
  background: #ffeceb;
}
@media (max-width: 767px) {
  .kpi-card {
    padding: 12px;
    border-radius: 10px;
  }
}

.dh-chart {
  display: flex;
  gap: 8px;
  padding-top: 22px;
}
.dh-chart__yaxis {
  flex: none;
  min-width: 40px;
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: end;
  padding-inline-end: 6px;
}
.dh-chart__ytick {
  font-size: 10px;
  line-height: 1;
  color: #7b8794;
}
.dh-chart__plot {
  flex: 1;
  min-width: 0;
}
.dh-chart__area {
  position: relative;
  height: 260px;
  border-inline-start: 1px solid #d7dee8;
  border-bottom: 1px solid #d7dee8;
}
.dh-chart__grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.dh-chart__gridline {
  height: 0;
  border-top: 1px dashed #c2ccda;
}
.dh-chart__gridline:last-child {
  border-top-color: transparent;
}
.dh-chart__xlabels {
  display: flex;
  gap: 8px;
  padding: 6px 6px 0;
}
.dh-chart__xlabel {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  color: #7b8794;
}

.dh-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 6px;
}

.dh-bar {
  flex: 1;
  min-width: 0;
  min-height: 3px;
  position: relative;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #5aa6f0 0%, #348fe2 100%);
  transition: filter 0.2s ease;
}
.dh-bar:hover {
  filter: brightness(1.07);
}
.dh-bar__peak {
  position: absolute;
  top: -18px;
  inset-inline-start: 0;
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #348fe2;
  white-space: nowrap;
}
.dh-bar__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 5;
}
.dh-bar__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}
.dh-bar:hover .dh-bar__tip {
  opacity: 1;
  visibility: visible;
}

.dh-empty {
  text-align: center;
  color: #7b8794;
  font-size: 13px;
  padding: 40px 0;
}

.dh-table {
  width: 100%;
  border-collapse: collapse;
}
.dh-table th {
  height: 40px;
  font-size: 10.5px;
  font-weight: 600;
  text-align: start;
  vertical-align: middle;
  color: #7b8794;
  padding: 0 6px;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
}
.dh-table td {
  font-size: 13px;
  padding: 11px 6px;
  border-top: 1px solid #eaeef3;
  color: #1f2937;
  vertical-align: middle;
}
.dh-table a {
  color: #348fe2;
  font-weight: 600;
}
.dh-table__muted {
  color: #7b8794;
}
.dh-table--orders {
  min-width: 460px;
}
.dh-table--orders th:not(:first-child),
.dh-table--orders td:not(:first-child) {
  text-align: center;
}

.dh-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: #ffeceb;
  color: #d63a36;
}

.dh-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.dh-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.dh-pill--green {
  color: #0a8f6e;
  background: #e3f7f1;
}
.dh-pill--amber {
  color: #b9770a;
  background: #fff4e0;
}
.dh-pill--blue {
  color: #2670c4;
  background: #e8f2fc;
}
.dh-pill--red {
  color: #d63a36;
  background: #ffeceb;
}
.dh-pill--gray {
  color: #6b7785;
  background: #eef1f6;
}
.dh-pill--quick {
  color: #1f2937;
  background: #ffd633;
}
.dh-pill--quick::before {
  display: none;
}

.dh-order {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dh-order__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #5566a0;
  background: #eef1f6;
}
.dh-order__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.25;
  min-width: 0;
}
.dh-order__name {
  font-weight: 700;
  font-size: 14px;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-order__id {
  font-size: 12px;
}
.dh-order__price {
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
}
.dh-order__date {
  color: #7b8794;
  font-size: 12px;
  white-space: nowrap;
}
.dh-order .dh-pill {
  flex: none;
}
.dh-order .dh-order__name {
  color: #1f2937;
}
.dh-order .dh-order__id {
  color: #7b8794;
}
.dh-order a.dh-order__name:hover,
.dh-order a.dh-order__id:hover {
  color: #348fe2;
}

.dh-time {
  font-size: 11px;
  color: #7b8794;
  white-space: nowrap;
  text-align: start;
}

.dh-product {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dh-product__thumb {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f3f7;
}
.dh-product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dh-product__name {
  font-weight: 600;
}

.dh-seller {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #eaeef3;
}
.dh-seller:first-child {
  border-top: none;
}
.dh-seller__rank {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f0e9fc;
  color: #8753de;
  font-weight: 800;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.dh-seller__thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f3f7;
}
.dh-seller__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dh-seller__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dh-seller__name {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-seller__name:hover {
  color: #348fe2;
}
.dh-seller__sep {
  color: #cbd2dc;
}
.dh-seller__qty {
  font-size: 12px;
  color: #7b8794;
}
.dh-seller__money {
  flex: none;
  font-weight: 800;
  font-size: 13px;
  color: #0a8f6e;
  white-space: nowrap;
}

.dh-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
}
.dh-scroll::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.dh-scroll::-webkit-scrollbar-thumb {
  background: #d7dee8;
  border-radius: 8px;
}

.dh-card__foot-action {
  padding: 12px 18px;
  border-top: 1px solid #eaeef3;
  text-align: center;
}

.dh-more-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #348fe2;
  padding: 6px 20px;
  border: 1px solid #cfe0f5;
  border-radius: 24px;
  background: #f3f8fe;
  transition: background 0.15s ease;
}
.dh-more-btn:hover {
  background: #e8f2fc;
}

.dh-growth {
  margin-bottom: 20px;
  margin-top: 50px;
}
.dh-growth__title {
  margin: 6px 2px 12px;
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
}
.dh-growth__title i {
  color: #348fe2;
  margin-inline-end: 6px;
}
.dh-growth__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.gb {
  flex: 1 1 260px;
  min-width: 240px;
  min-height: 150px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  color: #fff;
}
.gb__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.gb__desc {
  margin: 0;
  flex: 1;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.92;
}
.gb__cta {
  align-self: flex-start;
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 24px;
}
.gb__tel {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.gb__qr {
  flex: none;
  width: 74px;
  height: 74px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
}
.gb__qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.gb__play {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.gb__play small {
  display: block;
  font-size: 9px;
  line-height: 1;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}
.gb__play b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}
.gb__play:hover, .gb__play:focus, .gb__play:focus-visible {
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-decoration: none;
}
.gb__play-icon {
  width: 24px;
  height: 24px;
}
.gb--aff {
  background: linear-gradient(120deg, #6f42c1, #e83e8c);
}
.gb--aff .gb__cta {
  color: #a3238f;
}
.gb--tel {
  background: linear-gradient(120deg, #2aa3e6, #1c6fb8);
}
.gb--tel .gb__cta {
  color: #1769a8;
}
.gb--app {
  background: linear-gradient(120deg, #11998e, #1f3a5f);
  flex-grow: 1.2;
}

.month-goal__cta-title {
  margin: 16px 0 14px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: #1f2937;
}
.month-goal__cta-desc {
  margin: 5px 0 15px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: #7b8794;
}
.month-goal__stats {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.month-goal__stat {
  flex: 1;
  text-align: center;
  background: #f8fafc;
  border: 1px solid #eaeef3;
  border-radius: 12px;
  padding: 12px;
}
.month-goal__stat-value {
  font-weight: 800;
  font-size: 16px;
  color: #1f2937;
}
.month-goal__stat-label {
  color: #7b8794;
  font-size: 12px;
}
.month-goal__change {
  color: #348fe2;
  cursor: pointer;
}
.month-goal__ring {
  width: 168px;
  max-width: 100%;
  margin: 8px auto 4px;
  cursor: pointer;
}
.month-goal__ring svg {
  display: block;
  width: 100%;
  height: auto;
}
.month-goal__ring-track {
  stroke: #eef1f6;
}
.month-goal__ring-bar {
  stroke: #f5a623;
  transition: stroke-dasharray 0.5s ease;
}
.month-goal__ring-label {
  fill: #7b8794;
}
.month-goal__ring-pct {
  fill: #1f3a5f;
  font-weight: 800;
}
.month-goal__target {
  text-align: center;
  margin-top: 4px;
  font-size: 13px;
  color: #7b8794;
}
.month-goal__target strong {
  color: #1f3a5f;
  font-weight: 800;
}
.month-goal__target--empty {
  color: #348fe2;
  font-weight: 600;
  cursor: pointer;
}
.month-goal__target--empty i {
  margin-inline-end: 5px;
}
.month-goal__target--empty:hover {
  text-decoration: underline;
}
.month-goal__legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  font-size: 12px;
  color: #7b8794;
}
.month-goal__legend-item {
  display: inline-flex;
  align-items: center;
}
.month-goal__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-inline-end: 5px;
}
.month-goal__dot--done {
  background: #f5a623;
}
.month-goal__dot--remaining {
  background: #e3e3e3;
}

.dh-welcome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  padding: 22px 26px;
  border-radius: 16px;
  border: 1px solid #e4e6fb;
  background: linear-gradient(115deg, #f5f6ff 0%, #eef0ff 60%, #f3edff 100%);
  box-shadow: 0 1px 2px rgba(18, 38, 63, 0.035), 0 3px 8px rgba(18, 38, 63, 0.035);
  overflow: hidden;
}
.dh-welcome::before {
  content: "";
  position: absolute;
  inset-inline-end: 30%;
  top: -50px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.1), transparent 70%);
  pointer-events: none;
}
.dh-welcome__text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.dh-welcome__title {
  margin: 0 0 5px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #2b2a6b;
}
.dh-welcome__wave {
  display: inline-block;
}
.dh-welcome__sub {
  margin: 0;
  font-size: 13.5px;
  color: #5b5b8a;
}
.dh-welcome__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.dh-welcome__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #4f46e5;
  background: #fff;
  border: 1px solid #e4e6fb;
  border-radius: 20px;
}
.dh-welcome__chip i {
  font-size: 12px;
}
.dh-welcome__close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 1px solid #e4e6fb;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #9aa0c7;
  background: #fff;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dh-welcome__close:hover {
  color: #4f46e5;
  border-color: #c7c9f5;
}
.dh-welcome__thumb {
  position: relative;
  z-index: 1;
  flex: none;
  width: 220px;
  height: 124px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #e7ecfb;
  box-shadow: 0 8px 20px rgba(31, 41, 63, 0.16);
}
.dh-welcome__thumb:hover .dh-welcome__poster {
  transform: scale(1.04);
}
.dh-welcome__thumb:hover .dh-welcome__play {
  transform: translate(-50%, -50%) scale(1.09);
}
.dh-welcome__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.35s ease;
  background: radial-gradient(120% 120% at 30% 20%, #eef2ff, #dfe6fb 70%);
}
.dh-welcome__poster svg {
  width: 64%;
  height: 64%;
}
.dh-welcome__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dh-welcome__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(17, 24, 39, 0.7) 100%);
  pointer-events: none;
}
.dh-welcome__dur {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(17, 24, 39, 0.7);
  padding: 2px 8px;
  border-radius: 6px;
}
.dh-welcome__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: #7c3aed;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease;
}
.dh-welcome__thumb-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  text-align: start;
}
.dh-welcome__thumb-cap i {
  font-size: 13px;
}
@media (max-width: 767px) {
  .dh-welcome {
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px;
  }
  .dh-welcome .dh-welcome__title {
    font-size: 19px;
  }
  .dh-welcome .dh-welcome__thumb {
    order: 3;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}

.dh-video-modal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}
.dh-video-modal .modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid #eaeef3;
}
.dh-video-modal .modal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}
.dh-video-modal .modal-title i {
  color: #7c3aed;
}
.dh-video-modal .modal-body {
  padding: 16px;
}

.dh-video-frame {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #eef2ff, #dfe6fb 70%);
}
.dh-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.dh-goal-modal .modal-dialog {
  max-width: 420px;
}
.dh-goal-modal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(18, 38, 63, 0.18);
}
.dh-goal-modal .modal-header {
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid #eaeef3;
}
.dh-goal-modal .modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}
.dh-goal-modal__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #f5a623;
  background: #fff4e0;
}
.dh-goal-modal .modal-body {
  display: flex;
  flex-flow: column;
  padding: 18px;
}
.dh-goal-modal__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}
.dh-goal-modal__field {
  position: relative;
  display: flex;
  align-items: center;
}
.dh-goal-modal__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  padding-inline-end: 60px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dh-goal-modal__input:focus {
  outline: 0;
  background: #fff;
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.15);
}
.dh-goal-modal__suffix {
  position: absolute;
  inset-inline-end: 14px;
  font-size: 12px;
  font-weight: 700;
  color: #7b8794;
  pointer-events: none;
}
.dh-goal-modal__heading {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}
.dh-goal-modal__desc {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.6;
  color: #7b8794;
}
.dh-goal-modal .modal-footer {
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid #eaeef3;
}
.dh-goal-modal__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #7b8794;
  padding: 9px 16px;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
}
.dh-goal-modal__cancel:hover {
  color: #1f2937;
  background: #f1f3f7;
}
.dh-goal-modal__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #348fe2;
  border: 0;
  padding: 9px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dh-goal-modal__save:hover {
  background: rgb(29.65, 122.6896551724, 207.55);
}

.dh-quick-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 2px 10px;
  font-size: 15px;
  font-weight: 800;
  color: #1f2937;
}
.dh-quick-title i {
  color: #348fe2;
  font-size: 14px;
}

.dh-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}
.dh-quick__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid #eaeef3;
  border-radius: 30px;
  box-shadow: 0 1px 2px rgba(18, 38, 63, 0.035), 0 3px 8px rgba(18, 38, 63, 0.035);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dh-quick__item:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(18, 38, 63, 0.16);
}
.dh-quick__item:hover .dh-quick__dot {
  background: rgba(255, 255, 255, 0.25);
}
.dh-quick__item--blue:hover {
  background: rgb(30.2875, 125.3275862069, 212.0125);
  border-color: rgb(30.2875, 125.3275862069, 212.0125);
}
.dh-quick__item--green:hover {
  background: rgb(0, 137.4, 107.9571428571);
  border-color: rgb(0, 137.4, 107.9571428571);
}
.dh-quick__item--purple:hover {
  background: rgb(114.1024390244, 53.0468292683, 216.2531707317);
  border-color: rgb(114.1024390244, 53.0468292683, 216.2531707317);
}
.dh-quick__dot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #fff;
}
.dh-quick__dot--blue {
  background: #348fe2;
}
.dh-quick__dot--green {
  background: #00a884;
}
.dh-quick__dot--purple {
  background: #8753de;
}
@media (max-width: 767px) {
  .dh-quick {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .dh-quick::-webkit-scrollbar {
    height: 0;
  }
  .dh-quick .dh-quick__item {
    flex: none;
  }
}

@media (max-width: 767px) {
  .app-content {
    padding: 10px;
  }
  .kpi-card {
    padding: 14px;
  }
  .kpi-card__num {
    font-size: 22px;
  }
  .kpi-card__chip {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
  .dh-card__head {
    padding: 13px 14px;
  }
  .dh-card__body {
    padding: 0 14px;
  }
  .dh-card__title {
    font-size: 14px;
  }
  .dh-chart {
    padding-top: 18px;
  }
  .dh-chart__yaxis {
    min-width: 30px;
    height: 200px;
    padding-inline-end: 4px;
  }
  .dh-chart__area {
    height: 200px;
  }
  .dh-chart__ytick, .dh-chart__xlabel {
    font-size: 9px;
  }
  .dh-chart__xlabel:not(:nth-child(4n+1)) {
    visibility: hidden;
  }
  .dh-table th {
    font-size: 10px;
  }
  .dh-table td {
    padding: 9px 5px;
    font-size: 12px;
  }
  .dh-order {
    gap: 8px;
  }
  .dh-order__avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .dh-order__name {
    font-size: 13px;
  }
  .dh-product__thumb {
    width: 34px;
    height: 34px;
  }
  .dh-seller {
    gap: 10px;
  }
  .dh-seller__thumb {
    width: 40px;
    height: 40px;
  }
  .dh-seller__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .gb {
    flex-basis: 100%;
  }
}
@media (max-width: 480px) {
  .dh-chart__xlabel:not(:nth-child(6n+1)) {
    visibility: hidden;
  }
}
.login.login-v2 .login-container {
  background: rgba(10, 20, 38, 0.78);
  max-width: 450px;
  padding: 30px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.login.login-v2 .login-header {
  padding: 0 0 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 20px;
}
.login.login-v2 .login-header .brand h1 {
  font-weight: bold;
  color: #fff;
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  overflow: hidden;
}
.login.login-v2 .login-header .brand small {
  font-size: 12px !important;
  opacity: 0.7;
  display: block;
  margin-top: 2px;
}
.login.login-v2 .login-content {
  color: #fff;
}
.login.login-v2 .login-content .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 6px;
  font-size: 1rem;
}
.login.login-v2 .login-content .form-control::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.login.login-v2 .login-content .form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.login.login-v2 .login-content .checkbox {
  margin-top: 0;
  margin-bottom: 15px;
}
.login.login-v2 .login-content .checkbox label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}
.login.login-v2 .login-content .checkbox input {
  margin-top: -1px;
}
.login.login-v2 .login-content .login-buttons {
  display: block;
  width: 100%;
  margin-bottom: 15px;
}
.login.login-v2 .login-content .login-buttons .btn {
  display: block;
  width: 100%;
  font-weight: bold;
  font-size: 15px;
  border-radius: 6px;
  padding: 10px;
  letter-spacing: 0.3px;
}
.login.login-v2 .login-content .m-t-10.m-b-10 {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.login.login-v2 .login-content .m-t-10.m-b-10 a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login.login-v2 .login-content hr {
  border-color: rgba(255, 255, 255, 0.15);
  margin-top: 15px;
  margin-bottom: 12px;
}
.login.login-v2 .login-content footer {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.login.login-v2 .login-content footer p {
  margin-bottom: 0;
}
.login.login-v2 .login-content footer .company-name {
  font-weight: bold;
  font-size: 13px;
  color: #348fe2 !important;
}
.login.login-v2 .select2-selection {
  background-color: transparent;
  border: none;
  color: #fff;
}
.login.login-v2 .select2-container--default .select2-selection--single .select2-selection__rendered,
.login.login-v2 .form-group.genderback {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
}
.login.login-v2 .form-group.genderback {
  height: 40px;
  border-radius: 3px;
  padding: 10px;
}
.login.login-v2 .logo-img-box {
  width: 70px;
  height: 60px;
  background-color: #0f233b;
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.login.login-v2 .logo-img-box img {
  width: 100%;
  height: 100%;
}

.ltr .login.login-v2 .login-content .checkbox label {
  padding-left: 20px;
  padding-right: initial;
}
.ltr .login.login-v2 .login-content .checkbox label input {
  margin-left: -20px;
  margin-right: 0;
}

.themesFilters .themes-store-banner, .themesFilters .offerBannerContainer, .themesFilters .help-center-banner, .packages .themes-store-banner, .packages .offerBannerContainer, .packages .help-center-banner, .offerBanner .themes-store-banner, .offerBanner .offerBannerContainer, .offerBanner .help-center-banner, .help-center .themes-store-banner, .help-center .offerBannerContainer, .help-center .help-center-banner {
  border-radius: 10px;
  background: linear-gradient(90deg, #1374c8, #070e19);
  min-height: 230px;
  overflow: hidden;
  margin-bottom: 30px;
  padding: 30px;
}
.themesFilters .themes-store-banner .img-box, .themesFilters .offerBannerContainer .img-box, .themesFilters .help-center-banner .img-box, .packages .themes-store-banner .img-box, .packages .offerBannerContainer .img-box, .packages .help-center-banner .img-box, .offerBanner .themes-store-banner .img-box, .offerBanner .offerBannerContainer .img-box, .offerBanner .help-center-banner .img-box, .help-center .themes-store-banner .img-box, .help-center .offerBannerContainer .img-box, .help-center .help-center-banner .img-box {
  align-items: center;
  font-size: 60px;
  justify-content: center;
  margin-left: 20px;
  width: 220px;
}
.themesFilters .themes-store-banner .img-box img, .themesFilters .offerBannerContainer .img-box img, .themesFilters .help-center-banner .img-box img, .packages .themes-store-banner .img-box img, .packages .offerBannerContainer .img-box img, .packages .help-center-banner .img-box img, .offerBanner .themes-store-banner .img-box img, .offerBanner .offerBannerContainer .img-box img, .offerBanner .help-center-banner .img-box img, .help-center .themes-store-banner .img-box img, .help-center .offerBannerContainer .img-box img, .help-center .help-center-banner .img-box img {
  max-width: 95%;
  object-fit: cover;
}
.themesFilters .themes-store-banner h3, .themesFilters .themes-store-banner p, .themesFilters .offerBannerContainer h3, .themesFilters .offerBannerContainer p, .themesFilters .help-center-banner h3, .themesFilters .help-center-banner p, .packages .themes-store-banner h3, .packages .themes-store-banner p, .packages .offerBannerContainer h3, .packages .offerBannerContainer p, .packages .help-center-banner h3, .packages .help-center-banner p, .offerBanner .themes-store-banner h3, .offerBanner .themes-store-banner p, .offerBanner .offerBannerContainer h3, .offerBanner .offerBannerContainer p, .offerBanner .help-center-banner h3, .offerBanner .help-center-banner p, .help-center .themes-store-banner h3, .help-center .themes-store-banner p, .help-center .offerBannerContainer h3, .help-center .offerBannerContainer p, .help-center .help-center-banner h3, .help-center .help-center-banner p {
  color: #fff;
}
.themesFilters .themes-store-banner h3, .themesFilters .offerBannerContainer h3, .themesFilters .help-center-banner h3, .packages .themes-store-banner h3, .packages .offerBannerContainer h3, .packages .help-center-banner h3, .offerBanner .themes-store-banner h3, .offerBanner .offerBannerContainer h3, .offerBanner .help-center-banner h3, .help-center .themes-store-banner h3, .help-center .offerBannerContainer h3, .help-center .help-center-banner h3 {
  font-weight: bold;
  margin: 0 0 15px 0;
}
@media (max-width: 576px) {
  .themesFilters .themes-store-banner, .themesFilters .offerBannerContainer, .themesFilters .help-center-banner, .packages .themes-store-banner, .packages .offerBannerContainer, .packages .help-center-banner, .offerBanner .themes-store-banner, .offerBanner .offerBannerContainer, .offerBanner .help-center-banner, .help-center .themes-store-banner, .help-center .offerBannerContainer, .help-center .help-center-banner {
    padding: 15px 20px;
  }
}
.themesFilters .offerBannerContainer, .packages .offerBannerContainer, .offerBanner .offerBannerContainer, .help-center .offerBannerContainer {
  background: linear-gradient(110deg, #cb436e, #501563);
}
.themesFilters .offerBannerContainer a, .packages .offerBannerContainer a, .offerBanner .offerBannerContainer a, .help-center .offerBannerContainer a {
  background-color: #3c1a46;
  height: 50px;
  display: inline-flex;
  border-radius: 7px;
  padding: 0 25px;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 20px;
  font-size: 16px;
}
.themesFilters .offerBannerContainer a i, .themesFilters .offerBannerContainer a svg, .packages .offerBannerContainer a i, .packages .offerBannerContainer a svg, .offerBanner .offerBannerContainer a i, .offerBanner .offerBannerContainer a svg, .help-center .offerBannerContainer a i, .help-center .offerBannerContainer a svg {
  margin: 0 10px;
}
.themesFilters .layouts, .packages .layouts, .offerBanner .layouts, .help-center .layouts {
  padding: 3rem;
}
@media (max-width: 575.98px) {
  .themesFilters .layouts, .packages .layouts, .offerBanner .layouts, .help-center .layouts {
    padding: 1rem;
  }
}
.themesFilters .layouts .item, .packages .layouts .item, .offerBanner .layouts .item, .help-center .layouts .item {
  position: relative;
  border: 0.1rem solid #e7e7e7;
  border-radius: 0.5rem;
  padding: 1rem;
  transition: all 0.25s;
  margin-bottom: 3rem;
}
.themesFilters .layouts .item.active, .packages .layouts .item.active, .offerBanner .layouts .item.active, .help-center .layouts .item.active {
  border-color: #0e8a65;
}
.themesFilters .layouts .item:hover, .themesFilters .layouts .item:focus, .packages .layouts .item:hover, .packages .layouts .item:focus, .offerBanner .layouts .item:hover, .offerBanner .layouts .item:focus, .help-center .layouts .item:hover, .help-center .layouts .item:focus {
  border-color: #348fe2;
  transition: all 0.25s;
}
.themesFilters .layouts .item:hover.active, .themesFilters .layouts .item:focus.active, .packages .layouts .item:hover.active, .packages .layouts .item:focus.active, .offerBanner .layouts .item:hover.active, .offerBanner .layouts .item:focus.active, .help-center .layouts .item:hover.active, .help-center .layouts .item:focus.active {
  border-color: #0e8a65;
}
.themesFilters .layouts .item .active_badge, .packages .layouts .item .active_badge, .offerBanner .layouts .item .active_badge, .help-center .layouts .item .active_badge {
  position: absolute;
  background: #0e8a65;
  right: -1rem;
  top: -1rem;
  border-radius: 50%;
  color: white;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
}
.themesFilters .layouts .item .img-box img, .packages .layouts .item .img-box img, .offerBanner .layouts .item .img-box img, .help-center .layouts .item .img-box img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 0.5rem;
  border: 0.1rem solid #e7e7e7;
  object-fit: cover;
}
.themesFilters .layouts .item .details,
.themesFilters .layouts .item .action, .packages .layouts .item .details,
.packages .layouts .item .action, .offerBanner .layouts .item .details,
.offerBanner .layouts .item .action, .help-center .layouts .item .details,
.help-center .layouts .item .action {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: 0.1rem solid #dedede;
}
.themesFilters .layouts .item .details, .packages .layouts .item .details, .offerBanner .layouts .item .details, .help-center .layouts .item .details {
  justify-content: space-between;
  margin-bottom: 0;
}
.themesFilters .layouts .item .details h5, .packages .layouts .item .details h5, .offerBanner .layouts .item .details h5, .help-center .layouts .item .details h5 {
  font-size: 16px;
  font-weight: 600;
  margin: 15px 0;
}
.themesFilters .layouts .item .action, .packages .layouts .item .action, .offerBanner .layouts .item .action, .help-center .layouts .item .action {
  border: 0;
  margin: 0;
  justify-content: space-around;
}
.themesFilters .layouts .item .action .btn, .packages .layouts .item .action .btn, .offerBanner .layouts .item .action .btn, .help-center .layouts .item .action .btn {
  background: transparent;
  color: #348fe2;
  border: 0;
  font-weight: bold;
  padding: 0;
}
.themesFilters .layouts .item .action .btn span, .packages .layouts .item .action .btn span, .offerBanner .layouts .item .action .btn span, .help-center .layouts .item .action .btn span {
  font-weight: normal;
}
.themesFilters .layouts .item .action .btn.disabled, .themesFilters .layouts .item .action .btn.activated, .packages .layouts .item .action .btn.disabled, .packages .layouts .item .action .btn.activated, .offerBanner .layouts .item .action .btn.disabled, .offerBanner .layouts .item .action .btn.activated, .help-center .layouts .item .action .btn.disabled, .help-center .layouts .item .action .btn.activated {
  color: #0e8a65;
}
.themesFilters .layouts .item .action .btn.disabled span, .themesFilters .layouts .item .action .btn.activated span, .packages .layouts .item .action .btn.disabled span, .packages .layouts .item .action .btn.activated span, .offerBanner .layouts .item .action .btn.disabled span, .offerBanner .layouts .item .action .btn.activated span, .help-center .layouts .item .action .btn.disabled span, .help-center .layouts .item .action .btn.activated span {
  padding: 0 10px;
}
.themesFilters .layouts .item .action .dropup .active_color, .packages .layouts .item .action .dropup .active_color, .offerBanner .layouts .item .action .dropup .active_color, .help-center .layouts .item .action .dropup .active_color {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  margin-top: 8px;
}
.themesFilters .layouts .item .action .dropup.open .dropdown-menu, .packages .layouts .item .action .dropup.open .dropdown-menu, .offerBanner .layouts .item .action .dropup.open .dropdown-menu, .help-center .layouts .item .action .dropup.open .dropdown-menu {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-width: 140px;
  flex-wrap: wrap;
  grid-gap: 10px;
  padding: 10px !important;
}
.themesFilters .layouts .item .theme-colors .buttons, .packages .layouts .item .theme-colors .buttons, .offerBanner .layouts .item .theme-colors .buttons, .help-center .layouts .item .theme-colors .buttons {
  text-align: center;
  padding: 10px 0 0;
  width: 100%;
}
.themesFilters .layouts .item .theme-colors .buttons form, .packages .layouts .item .theme-colors .buttons form, .offerBanner .layouts .item .theme-colors .buttons form, .help-center .layouts .item .theme-colors .buttons form {
  display: inline;
}
.themesFilters .layouts .item .theme-colors .buttons button, .packages .layouts .item .theme-colors .buttons button, .offerBanner .layouts .item .theme-colors .buttons button, .help-center .layouts .item .theme-colors .buttons button {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 3px;
  float: initial;
}
.themesFilters .layouts .item .theme-colors .buttons button.active, .packages .layouts .item .theme-colors .buttons button.active, .offerBanner .layouts .item .theme-colors .buttons button.active, .help-center .layouts .item .theme-colors .buttons button.active {
  outline: 3px dashed #000;
  outline-offset: 3px;
}

@media (max-width: 576px) {
  .themesFilters, .packages .layouts .layout-col-4 {
    grid-template-columns: 1fr;
  }
  .themes-store-banner {
    flex-direction: column;
    grid-gap: 15px;
  }
}
@media (min-width: 768px) {
  .themesFilters, .packages .layouts .layout-col-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .themesFilters, .packages .layouts .layout-col-4 .item .img img {
    min-height: inherit;
  }
  .themes-store-banner {
    flex-direction: row;
  }
}
@media (min-width: 992px) {
  .themesFilters, .packages .layouts .layout-col-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .themesFilters, .packages .layouts .layout-col-4 .item .img img {
    min-height: 25rem;
  }
}
@media (min-width: 1200px) {
  .themesFilters, .packages .layouts .layout-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .themesFilters, .packages .layouts .layout-col-4 .item .img img {
    min-height: 30rem;
  }
}
.themes_settings_options {
  display: flex;
  align-content: center;
  gap: 10px;
}
.themes_settings_options li {
  height: 40px;
  background-color: #d9e8f8;
  color: #348fe2;
  border-radius: 7px;
  font-weight: bold;
}
.themes_settings_options li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: inherit;
  gap: 7px;
  padding: 0 15px;
}
.themes_settings_options li:hover, .themes_settings_options li:active, .themes_settings_options li:focus, .themes_settings_options li.active {
  background-color: #348fe2 a;
  background-color-color: #fff;
}

.special-offer {
  padding: 40px;
}
.special-offer #offer_form .offer-head {
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 10px;
  margin-top: 0;
}
.special-offer #offer_form .offer-info, .special-offer #offer_form .offer-option {
  background-color: #eff7ff;
  padding: 25px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.special-offer .social-options {
  border-radius: 7px;
}
.special-offer .social-options .collapse-checkbox {
  display: flex;
  align-items: center;
  padding: 20px;
}

.marketing-campaigns-form .is-invalid {
  border-color: #ff2121 !important;
}

.campaigns-conditions .condition-item > .col-sm-12 > .d-flex {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}
.campaigns-conditions #uploadBtn {
  margin: 0 !important;
}
.campaigns-conditions .condition-item label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  text-align: start;
}
.campaigns-conditions .condition-value .selected-value:empty {
  display: none;
}
.campaigns-conditions .condition-item > [class*=col-] {
  padding-inline: 8px !important;
}
.campaigns-conditions .select2-container {
  width: 100% !important;
}
.campaigns-conditions .select2-container--default .select2-selection--multiple {
  min-height: 40px !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.campaigns-conditions .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
}
.campaigns-conditions .select2-container--default .select2-selection--multiple .select2-selection__choice {
  height: auto !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  background: rgba(52, 143, 226, 0.1) !important;
  border: 1px solid rgba(52, 143, 226, 0.22) !important;
  border-radius: 5px !important;
  color: #348fe2 !important;
  font-size: 12px;
}
.campaigns-conditions .select2-container--default .select2-selection--multiple .select2-search__field {
  min-height: auto !important;
  margin-top: 0 !important;
}

.messages-form .campaigns-conditions {
  margin-top: 18px;
}

.campaign-conditions {
  padding: 35px;
  background-color: #f0f8ff;
  border-radius: 8px;
  border: 1px dashed #8e9eb3;
}
.campaign-conditions h4 {
  margin-top: 0;
  font-weight: bold;
  margin-bottom: 20px;
}
.campaign-conditions .conditions_container div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.campaign-conditions .conditions_container div h5 {
  margin: 0;
}
.campaign-conditions .conditions_container div span.btn {
  width: 35px;
  height: 35px;
  background-color: #ffdfdf;
  color: #993c37;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.campaign-conditions .conditions_container div span.btn:hover {
  background-color: #ff5b57;
  color: #fff;
}
.campaign-conditions .conditions_container hr {
  margin: 10px 0;
}

.wrapper {
  display: flex;
  min-height: 100vh;
}

/* Colors */
:root {
  --shipping-primary: #348fe2;
  --shipping-secondary: #476b9b;
  --shipping-light: #e6f3ff;
  --shipping-dark: #1a2229;
  --shipping-accent: #f7c552;
  --shipping-gray: #f5f5f5;
  --shipping-text: #333;
}

.shipping-payment-wrapper .service-card,
.adding-page-wrapper .service-card {
  background-color: white;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 30px 30px 15px;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
}
.shipping-payment-wrapper .service-card .card-header .card-title,
.adding-page-wrapper .service-card .card-header .card-title {
  min-height: initial;
}
.shipping-payment-wrapper .service-card .btn-primary,
.adding-page-wrapper .service-card .btn-primary {
  width: 30%;
  height: 45px;
  font-size: 17px;
}
.shipping-payment-wrapper .service-card:hover,
.adding-page-wrapper .service-card:hover {
  border: 1px solid var(--shipping-primary);
}
.shipping-payment-wrapper .service-card .card-header,
.adding-page-wrapper .service-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.shipping-payment-wrapper .service-card .card-header div,
.adding-page-wrapper .service-card .card-header div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shipping-payment-wrapper .service-card a.package-material,
.adding-page-wrapper .service-card a.package-material {
  height: 36px;
  padding: 0 15px;
  background-color: #e6f3ff;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #386085;
}
.shipping-payment-wrapper .service-card a.package-material:hover,
.adding-page-wrapper .service-card a.package-material:hover {
  background-color: var(--shipping-primary);
  color: #fff;
}
.shipping-payment-wrapper .service-card .shipping-icon,
.adding-page-wrapper .service-card .shipping-icon {
  background-color: var(--shipping-light);
  color: var(--shipping-primary);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.shipping-payment-wrapper .service-card .card-title,
.adding-page-wrapper .service-card .card-title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--shipping-dark);
}
.shipping-payment-wrapper .service-card .card-description,
.adding-page-wrapper .service-card .card-description {
  color: #777;
  margin-bottom: 20px;
}
.shipping-payment-wrapper .service-card,
.adding-page-wrapper .service-card {
  /* Provider Items Styles */
}
.shipping-payment-wrapper .service-card .provider-item,
.adding-page-wrapper .service-card .provider-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 15px;
  transition: all 0.3s;
}
.shipping-payment-wrapper .service-card .provider-info,
.adding-page-wrapper .service-card .provider-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.shipping-payment-wrapper .service-card .provider-logo,
.adding-page-wrapper .service-card .provider-logo {
  width: 60px;
  height: 60px;
  background-color: var(--shipping-light);
  color: var(--shipping-primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  overflow: hidden;
}
.shipping-payment-wrapper .service-card .provider-logo img,
.adding-page-wrapper .service-card .provider-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shipping-payment-wrapper .service-card .provider-details h4,
.adding-page-wrapper .service-card .provider-details h4 {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 500;
}
.shipping-payment-wrapper .service-card .direct-connect-label,
.adding-page-wrapper .service-card .direct-connect-label {
  font-size: 12px;
  color: var(--shipping-secondary);
}
.shipping-payment-wrapper .service-card .provider-actions,
.adding-page-wrapper .service-card .provider-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shipping-payment-wrapper .service-card .provider-actions .btn,
.adding-page-wrapper .service-card .provider-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  white-space: nowrap;
}
.shipping-payment-wrapper .service-card,
.adding-page-wrapper .service-card {
  /* Zone Item Styles */
}
.shipping-payment-wrapper .service-card .zone-item,
.adding-page-wrapper .service-card .zone-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s;
}
.shipping-payment-wrapper .service-card .zone-item:hover,
.adding-page-wrapper .service-card .zone-item:hover {
  background-color: #f9f9f9;
}
.shipping-payment-wrapper .service-card .zone-info,
.adding-page-wrapper .service-card .zone-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.shipping-payment-wrapper .service-card .zone-icon,
.adding-page-wrapper .service-card .zone-icon {
  width: 40px;
  height: 40px;
  background-color: var(--shipping-light);
  color: var(--shipping-primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.shipping-payment-wrapper .service-card .zone-details h4,
.adding-page-wrapper .service-card .zone-details h4 {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 500;
}
.shipping-payment-wrapper .service-card .zone-details p,
.adding-page-wrapper .service-card .zone-details p {
  margin: 0;
  font-size: 12px;
  color: #888;
}
.shipping-payment-wrapper .service-card .zone-actions,
.adding-page-wrapper .service-card .zone-actions {
  display: flex;
  gap: 10px;
}
.shipping-payment-wrapper .service-card .zone-actions .checkbox,
.adding-page-wrapper .service-card .zone-actions .checkbox {
  margin: 0;
}
.shipping-payment-wrapper .service-card .zone-actions .actions-button,
.adding-page-wrapper .service-card .zone-actions .actions-button {
  display: flex;
  align-items: center;
}
.shipping-payment-wrapper .service-card .btn-icon,
.adding-page-wrapper .service-card .btn-icon {
  border: none;
  padding: 5px;
  border-radius: 4px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shipping-payment-wrapper .service-card .btn-delete,
.adding-page-wrapper .service-card .btn-delete {
  background: #ffe9e9;
  background-color: #ffe9e9;
}
.shipping-payment-wrapper .service-card .btn-delete svg, .shipping-payment-wrapper .service-card .btn-delete i,
.adding-page-wrapper .service-card .btn-delete svg,
.adding-page-wrapper .service-card .btn-delete i {
  color: #d24b4b;
}
.shipping-payment-wrapper .service-card .btn-delete:hover,
.adding-page-wrapper .service-card .btn-delete:hover {
  color: #fff;
}
.shipping-payment-wrapper .service-card .btn-delete:hover svg, .shipping-payment-wrapper .service-card .btn-delete:hover i,
.adding-page-wrapper .service-card .btn-delete:hover svg,
.adding-page-wrapper .service-card .btn-delete:hover i {
  color: #fff;
}
.shipping-payment-wrapper .service-card .btn-edit,
.adding-page-wrapper .service-card .btn-edit {
  background-color: var(--shipping-light) !important;
  color: var(--shipping-primary);
}
.shipping-payment-wrapper .service-card .shipping-zones .zone-item .btn-edit:hover, .shipping-payment-wrapper .service-card .shipping-zones .provider-item .btn-edit:hover, .shipping-payment-wrapper .service-card .shipping-providers .zone-item .btn-edit:hover, .shipping-payment-wrapper .service-card .shipping-providers .provider-item .btn-edit:hover,
.adding-page-wrapper .service-card .shipping-zones .zone-item .btn-edit:hover,
.adding-page-wrapper .service-card .shipping-zones .provider-item .btn-edit:hover,
.adding-page-wrapper .service-card .shipping-providers .zone-item .btn-edit:hover,
.adding-page-wrapper .service-card .shipping-providers .provider-item .btn-edit:hover {
  background-color: var(--shipping-primary) !important;
  color: #fff;
}
.shipping-payment-wrapper .service-card .shipping-zones .zone-item .btn-delete:hover, .shipping-payment-wrapper .service-card .shipping-zones .provider-item .btn-delete:hover, .shipping-payment-wrapper .service-card .shipping-providers .zone-item .btn-delete:hover, .shipping-payment-wrapper .service-card .shipping-providers .provider-item .btn-delete:hover,
.adding-page-wrapper .service-card .shipping-zones .zone-item .btn-delete:hover,
.adding-page-wrapper .service-card .shipping-zones .provider-item .btn-delete:hover,
.adding-page-wrapper .service-card .shipping-providers .zone-item .btn-delete:hover,
.adding-page-wrapper .service-card .shipping-providers .provider-item .btn-delete:hover {
  background-color: #ff4757 !important;
  color: #fff;
}
.shipping-payment-wrapper .service-card,
.adding-page-wrapper .service-card {
  /* Add Button Styles */
}
.shipping-payment-wrapper .service-card .btn-add-zone,
.shipping-payment-wrapper .service-card .btn-add-service,
.shipping-payment-wrapper .service-card .btn-add-pickup,
.adding-page-wrapper .service-card .btn-add-zone,
.adding-page-wrapper .service-card .btn-add-service,
.adding-page-wrapper .service-card .btn-add-pickup {
  width: 100%;
  padding: 10px;
  border: 1px solid #348fe2;
  color: #348fe2;
  background-color: white;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.shipping-payment-wrapper .service-card .btn-add-zone:hover,
.shipping-payment-wrapper .service-card .btn-add-service:hover,
.shipping-payment-wrapper .service-card .btn-add-pickup:hover,
.adding-page-wrapper .service-card .btn-add-zone:hover,
.adding-page-wrapper .service-card .btn-add-service:hover,
.adding-page-wrapper .service-card .btn-add-pickup:hover {
  background-color: #348fe2;
  color: #fff;
}
.shipping-payment-wrapper .service-card,
.adding-page-wrapper .service-card {
  /* Empty State */
}
.shipping-payment-wrapper .service-card .no-pickup-points,
.adding-page-wrapper .service-card .no-pickup-points {
  background-color: var(--shipping-light);
  border: 1px solid rgba(77, 62, 150, 0.1);
  border-radius: 10px;
  padding: 30px 15px;
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: bold;
}
.shipping-payment-wrapper .service-card .no-pickup-points p,
.adding-page-wrapper .service-card .no-pickup-points p {
  color: var(--shipping-primary);
  margin-bottom: 0;
}
.shipping-payment-wrapper .service-card .no-pickup-points i, .shipping-payment-wrapper .service-card .no-pickup-points svg,
.adding-page-wrapper .service-card .no-pickup-points i,
.adding-page-wrapper .service-card .no-pickup-points svg {
  font-size: 40px;
  margin-bottom: 5px;
  color: var(--shipping-primary);
}
.shipping-payment-wrapper .service-card .actions-button .checkbox .switchery,
.adding-page-wrapper .service-card .actions-button .checkbox .switchery {
  border-radius: 25px;
  height: 24px;
  width: 50px;
}
.shipping-payment-wrapper .service-card .actions-button .checkbox .switchery > small,
.adding-page-wrapper .service-card .actions-button .checkbox .switchery > small {
  height: 18px;
  top: 3px;
  width: 18px;
}
.shipping-payment-wrapper .shipping-data #prices-table tr td, .shipping-payment-wrapper .shipping-data #prices-table tr th,
.adding-page-wrapper .shipping-data #prices-table tr td,
.adding-page-wrapper .shipping-data #prices-table tr th {
  text-align: center !important;
}
.shipping-payment-wrapper .shipping-data #prices-table tr td input, .shipping-payment-wrapper .shipping-data #prices-table tr th input,
.adding-page-wrapper .shipping-data #prices-table tr td input,
.adding-page-wrapper .shipping-data #prices-table tr th input {
  max-width: 100px;
}
.shipping-payment-wrapper #cod_commission,
.adding-page-wrapper #cod_commission {
  max-width: 130px;
}
@media (max-width: 480px) {
  .shipping-payment-wrapper .col-sm-12,
  .adding-page-wrapper .col-sm-12 {
    width: 100% !important;
  }
  .shipping-payment-wrapper .col-sm-12 .page-header,
  .adding-page-wrapper .col-sm-12 .page-header {
    padding: 0;
  }
  .shipping-payment-wrapper .col-sm-12 .breadcrumb,
  .adding-page-wrapper .col-sm-12 .breadcrumb {
    display: none;
  }
  .shipping-payment-wrapper .col-sm-12 br:nth-of-type(2),
  .adding-page-wrapper .col-sm-12 br:nth-of-type(2) {
    display: none;
  }
  .shipping-payment-wrapper .container,
  .adding-page-wrapper .container {
    padding: 0 7px;
  }
  .shipping-payment-wrapper .service-card,
  .adding-page-wrapper .service-card {
    padding: 15px 10px;
  }
  .shipping-payment-wrapper .service-card .btn-icon,
  .adding-page-wrapper .service-card .btn-icon {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .shipping-payment-wrapper .service-card .card-header .shipping-icon,
  .adding-page-wrapper .service-card .card-header .shipping-icon {
    /*gap: 5px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 7px;*/
    display: none;
  }
  .shipping-payment-wrapper .service-card .card-header .card-title,
  .adding-page-wrapper .service-card .card-header .card-title {
    font-size: 16px;
  }
  .shipping-payment-wrapper .service-card .card-header .package-material,
  .adding-page-wrapper .service-card .card-header .package-material {
    padding: 0 10px;
    font-size: 13px;
  }
  .shipping-payment-wrapper .service-card .card-body,
  .adding-page-wrapper .service-card .card-body {
    padding: 5px 0 10px;
  }
  .shipping-payment-wrapper .service-card .card-body .card-description,
  .adding-page-wrapper .service-card .card-body .card-description {
    margin-bottom: 10px;
  }
  .shipping-payment-wrapper .service-card .provider-item,
  .adding-page-wrapper .service-card .provider-item {
    padding: 7px 10px;
    margin-bottom: 10px;
  }
  .shipping-payment-wrapper .service-card .provider-item .provider-info,
  .adding-page-wrapper .service-card .provider-item .provider-info {
    gap: 7px;
  }
  .shipping-payment-wrapper .service-card .provider-item .provider-info .provider-logo,
  .adding-page-wrapper .service-card .provider-item .provider-info .provider-logo {
    width: 40px;
    height: 40px;
  }
  .shipping-payment-wrapper .service-card .provider-item .zone-actions .package-material,
  .adding-page-wrapper .service-card .provider-item .zone-actions .package-material {
    padding: 0 10px;
  }
  .shipping-payment-wrapper .service-card .provider-item .zone-actions .package-material span,
  .adding-page-wrapper .service-card .provider-item .zone-actions .package-material span {
    display: none;
  }
}

.shappingCompanyPrices {
  display: grid;
}
.shappingCompanyPrices table td {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  min-width: 60px;
}
.shappingCompanyPrices table td input {
  width: 100px;
  text-align: center;
  border: 1px solid #e9ecf3;
}

.d-flex-justify-content-end {
  display: flex;
  justify-content: end;
}

:root {
  --primary: #4361ee;
  --primary-dark: #3a56d4;
  --primary-light: #f0f2ff;
  --secondary: #7209b7;
  --success: #06d6a0;
  --info: #118ab2;
  --warning: #ffd166;
  --danger: #ef476f;
  --light: #f8f9fa;
  --dark: #212529;
  --gray: #6c757d;
  --light-gray: #e9ecef;
  --border-radius: 16px;
  --table-bg: #f9fafc; /* لون خفيف لجدول المناطق */
}

/* A fieldset used only to disable a whole form area (readonly pages) — no visual box. */
.plain-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.dashboard-container {
  max-width: 1800px; /* زيادة العرض لشاشات 4K و 2K */
  margin: 0 auto;
  padding: 0 20px;
  /* Simple Header */
}
.dashboard-container .simple-header {
  margin-bottom: 30px;
  /*  background-color: white;
    padding: 20px 0;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);*/
}
.dashboard-container .logo-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 0 30px;*/
}
.dashboard-container .logo {
  display: flex;
  align-items: center;
}
.dashboard-container .logo-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  color: white;
  font-size: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.dashboard-container .logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dashboard-container .logo-text {
  flex-shrink: 0;
}
.dashboard-container .logo-text h1 {
  font-weight: 800;
  font-size: 24px;
  margin: 0;
  color: var(--dark);
}
.dashboard-container .logo-text p {
  color: var(--gray);
  margin: 5px 0 0;
  font-size: 13px;
}
.dashboard-container .header-stats {
  display: flex;
  align-items: center;
}
.dashboard-container .header-stat {
  background-color: var(--primary-light);
  padding: 12px 20px;
  border-radius: 10px;
  margin-right: 15px;
  border: 1px solid rgba(67, 97, 238, 0.2);
}
.dashboard-container .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  display: block;
}
.dashboard-container .stat-label {
  font-size: 14px;
  color: var(--gray);
  display: block;
}
.dashboard-container {
  /* Modern Tabs */
}
.dashboard-container .modern-tabs-container {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 30px;
}
.dashboard-container .tabs-header {
  display: flex;
  gap: 20px;
  background-color: white;
  border-bottom: 2px solid var(--light-gray);
  overflow-x: auto;
  scrollbar-width: none;
}
.dashboard-container .tabs-header::-webkit-scrollbar {
  display: none;
}
.dashboard-container .tab-item {
  padding: 15px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--gray);
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.dashboard-container .tab-item .tab-icon {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, #5a0d8a 100%);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  color: white;
  font-size: 18px;
}
.dashboard-container .tab-item:hover {
  color: var(--primary);
  /*background-color: var(--primary-light);*/
  border-bottom: 3px solid var(--primary);
}
.dashboard-container .tab-item.active {
  color: var(--primary);
  border-bottom: 3px solid var(--primary);
  /*background-color: var(--primary-light);*/
}
.dashboard-container .tab-item.active .tab-icon {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}
.dashboard-container .tab-content {
  padding: 30px;
}
.dashboard-container .tab-pane {
  display: none;
  animation: fadeIn 0.5s ease;
}
.dashboard-container .tab-pane .title_box {
  margin-top: 10px;
  margin-bottom: 20px;
}
.dashboard-container .tab-pane .title_box .tab-title {
  color: var(--primary);
  font-weight: 800;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dashboard-container .tab-pane .title_box .tab-title .tab-subtitle {
  color: var(--gray);
  font-size: 14px;
  max-width: 800px;
}
.dashboard-container .tab-pane.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dashboard-container {
  /* Shipping Zones Table */
}
.dashboard-container .shipping-table-container {
  /*border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px;
  background-color: var(--table-bg);*/ /* خلفية خفيفة للجدول */
  margin-bottom: 40px;
}
.dashboard-container .shipping-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--table-bg);
}
.dashboard-container .shipping-table thead {
  background: #f6f7f8;
}
.dashboard-container .shipping-table thead th {
  padding: 10px;
  text-align: center;
  font-size: 13px;
  border: none;
  background: transparent;
  color: #4d4d4d;
  font-weight: normal;
}
.dashboard-container .shipping-table thead td {
  padding: 16px 15px;
  text-align: center;
  border: none;
  border-bottom: 1px solid var(--light-gray);
}
.dashboard-container .shipping-table tbody tr {
  transition: all 0.2s;
  background-color: var(--table-bg);
}
.dashboard-container .shipping-table tbody tr:hover {
  background-color: #f0f3ff;
}
.dashboard-container .shipping-table tbody tr:last-child td {
  border-bottom: none;
}
.dashboard-container .zone-badge {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  color: white;
  font-size: 14px;
  min-width: 70px;
}
.dashboard-container .zone-1 {
  background-color: var(--success);
}
.dashboard-container .zone-2 {
  background-color: var(--info);
}
.dashboard-container .zone-3 {
  background-color: #7209b7;
}
.dashboard-container .zone-4 {
  background-color: var(--warning);
  color: #333;
}
.dashboard-container .zone-5 {
  background-color: var(--danger);
}
.dashboard-container .zone-6 {
  background-color: #06d6a0;
}
.dashboard-container .zone-7 {
  background-color: #073b4c;
}
.dashboard-container {
  /* Two Column Layout for Agreements */
}
.dashboard-container .agreements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-top: 20px;
}
.dashboard-container .agreement-box {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  height: 100%;
  border: 1px solid var(--light-gray);
}
.dashboard-container .agreement-box:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
  border-color: var(--primary-light);
}
.dashboard-container .agreement-box h4 {
  color: var(--primary);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f2ff;
  display: flex;
  align-items: center;
}
.dashboard-container .agreement-box h4 i {
  margin-left: 10px;
  color: var(--secondary);
}
.dashboard-container .agreement-table {
  width: 100%;
  border-collapse: collapse;
}
.dashboard-container .agreement-table tr {
  border-bottom: 1px solid #f0f2ff;
}
.dashboard-container .agreement-table .warning-row {
  border-bottom: 1px solid #f9e1e5;
}
.dashboard-container .agreement-table tr:last-child {
  border-bottom: none;
}
.dashboard-container .agreement-table th {
  text-align: right;
  padding: 14px 10px 14px 20px;
  font-weight: 600;
  color: #555;
  width: 60%;
}
.dashboard-container .agreement-table td {
  text-align: left;
  padding: 14px 20px 14px 10px;
  font-weight: 700;
  color: var(--dark);
}
.dashboard-container .highlight-row {
  background-color: #f0f7ff;
  border-radius: 8px;
}
.dashboard-container .warning-row {
  background-color: #fff0f3;
  border-radius: 8px;
}
.dashboard-container {
  /* Three Column Layout for Prohibited Products */
}
.dashboard-container .prohibited-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 25px;
  margin-top: 20px;
}
.dashboard-container .prohibited-box {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  height: 100%;
  border: 1px solid var(--light-gray);
}
.dashboard-container .prohibited-box:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}
.dashboard-container .prohibited-box h4 {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f2ff;
  display: flex;
  align-items: center;
}
.dashboard-container .prohibited-box h4 i {
  margin-left: 10px;
}
.dashboard-container .prohibited-box-1 h4 {
  color: var(--danger);
}
.dashboard-container .prohibited-box-2 h4 {
  color: #9d4edd;
}
.dashboard-container .prohibited-box-3 h4 {
  color: var(--info);
}
.dashboard-container .prohibited-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dashboard-container .prohibited-list li {
  font-size: 14px;
  padding: 7px 18px 7px 0px;
  border-bottom: 1px dashed #f0f2ff;
  position: relative;
  padding-right: 25px;
}
.dashboard-container .prohibited-list li:last-child {
  border-bottom: none;
}
.dashboard-container .prohibited-list li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
}
.dashboard-container .prohibited-box-1 .prohibited-list li:before {
  content: "\f00d";
  color: var(--danger);
}
.dashboard-container .prohibited-box-2 .prohibited-list li:before {
  content: "\f071";
  color: #9d4edd;
}
.dashboard-container .prohibited-box-3 .prohibited-list li:before {
  content: "\f05a";
  color: var(--info);
}
.dashboard-container {
  /* Excluded Areas - محدث */
}
.dashboard-container .excluded-areas {
  background-color: #f8f9ff;
  border-radius: var(--border-radius);
  padding: 25px;
  margin-top: 25px;
  border: 1px solid var(--light-gray);
  position: relative;
}
.dashboard-container .excluded-areas .excluded-header {
  background-color: #fff0f3;
  color: #7a7a7a;
  padding: 15px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.dashboard-container .excluded-areas .excluded-header h4 {
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  color: #4c4e62;
}
.dashboard-container .excluded-areas .excluded-header h4 i {
  margin-left: 10px;
}
.dashboard-container .excluded-areas .excluded-header p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}
.dashboard-container .excluded-cities-container {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  background-color: white;
  border-radius: 8px;
  border: 1px solid var(--light-gray);
}
.dashboard-container .excluded-list {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  column-gap: 30px;
}
.dashboard-container .excluded-list li {
  margin-bottom: 25px;
  margin-top: 25px;
  padding-right: 10px;
  break-inside: avoid;
  font-size: 14px;
}
.dashboard-container .excluded-list li strong {
  color: var(--dark);
}
.dashboard-container .scroll-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gray);
  font-size: 14px;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 5px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
}
.dashboard-container .scroll-indicator i {
  margin-left: 8px;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}
.dashboard-container {
  /* Info Card */
}
.dashboard-container .info-card {
  background-color: #fffdf0;
  border-radius: var(--border-radius);
  padding: 20px;
  margin-top: 30px;
  border-right: 4px solid #e29634;
}
.dashboard-container .info-card .info-card h5 {
  color: #e29634;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.dashboard-container .info-card .info-card h5 i {
  margin-left: 10px;
}
.dashboard-container {
  /* Responsive Design - تحسينات شاملة للاستجابة */
  /* شاشات كبيرة جداً (4K, 2K) */
}
@media (min-width: 1921px) {
  .dashboard-container {
    max-width: 2200px;
    padding: 0 40px;
  }
  .dashboard-container .shipping-table th,
  .dashboard-container .shipping-table td {
    padding: 22px 20px;
    font-size: 18px;
  }
  .dashboard-container .tab-title {
    font-size: 36px;
  }
  .dashboard-container .tab-subtitle {
    font-size: 22px;
  }
  .dashboard-container .agreement-box h4,
  .dashboard-container .prohibited-box h4 {
    font-size: 24px;
  }
}
.dashboard-container {
  /* شاشات الكمبيوتر المكتبي الكبيرة */
}
@media (min-width: 1400px) and (max-width: 1920px) {
  .dashboard-container {
    max-width: 1600px;
  }
  .dashboard-container .packaging-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}
.dashboard-container {
  /* شاشات اللاب توب والتابلت الأفقي */
}
@media (max-width: 1399px) and (min-width: 992px) {
  .dashboard-container {
    max-width: 1300px;
  }
  .dashboard-container .agreements-grid,
  .dashboard-container .prohibited-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-container .packaging-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
  .dashboard-container .excluded-list {
    columns: 2;
  }
}
.dashboard-container {
  /* شاشات التابلت */
}
@media (max-width: 991px) and (min-width: 768px) {
  .dashboard-container .shipping-table {
    display: block;
    overflow-x: auto;
  }
  .dashboard-container .excluded-list {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }
  .dashboard-container .header-stats {
    display: none;
  }
  .dashboard-container .tab-item {
    padding: 15px 20px;
    font-size: 15px;
  }
  .dashboard-container .tab-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin-left: 10px;
  }
  .dashboard-container .packaging-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .dashboard-container .prohibited-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dashboard-container .agreements-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.dashboard-container {
  /* شاشات الآيباد والهواتف الكبيرة */
}
@media (max-width: 767px) {
  .dashboard-container {
    padding: 0;
  }
  .dashboard-container .shappingCompanyPrices {
    display: initial;
  }
  .dashboard-container .agreements-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-container .prohibited-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-container .excluded-areas {
    padding: 0;
    margin-top: 0;
  }
  .dashboard-container .excluded-areas .excluded-cities-container {
    max-height: 360px;
    padding: 0;
  }
  .dashboard-container .excluded-areas .excluded-cities-container .excluded-list li {
    margin-bottom: 15px;
    margin-top: 15px;
  }
  .dashboard-container .simple-header {
    /*padding: 15px 0;*/
  }
  .dashboard-container .logo-section {
    padding: 0 15px;
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-container .logo {
    margin-bottom: 15px;
    width: 100%;
  }
  .dashboard-container .header-stats {
    width: 100%;
    justify-content: space-between;
  }
  .dashboard-container .header-stat {
    margin-right: 10px;
    padding: 10px 15px;
    flex-grow: 1;
    text-align: center;
  }
  .dashboard-container .packaging-item {
    height: auto;
    flex-direction: column;
  }
  .dashboard-container .packaging-img {
    width: 100%;
    height: 140px;
    border-left: none;
    border-bottom: 1px solid #f0f2ff;
  }
  .dashboard-container .simple-header {
    display: inline-block;
    margin-bottom: 0;
    margin-top: 10px;
  }
  .dashboard-container .tab-title {
    font-size: 24px;
  }
  .dashboard-container .tab-content {
    padding: 12px;
  }
  .dashboard-container .tabs-header {
    padding: 0 7px;
  }
  .dashboard-container .tab-item {
    padding: 10px;
    font-size: 14px;
  }
  .dashboard-container .logo-section {
    padding: 0 10k;
  }
  .dashboard-container .logo-text h1 {
    font-size: 20px;
  }
  .dashboard-container .logo-icon {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
  .dashboard-container .excluded-cities-container {
    max-height: 250px;
  }
  .dashboard-container .excluded-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-container .excluded-header h4 {
    margin-bottom: 10px;
  }
}
.dashboard-container {
  /* الهواتف الصغيرة */
}
@media (max-width: 576px) {
  .dashboard-container .packaging-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-container .agreement-table th,
  .dashboard-container .agreement-table td {
    padding: 12px 10px;
    font-size: 14px;
  }
  .dashboard-container .tab-item {
    padding: 12px 15px;
    font-size: 13px;
  }
  .dashboard-container .tab-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
    margin-left: 8px;
  }
  .dashboard-container .logo-text h1 {
    font-size: 22px;
  }
  .dashboard-container .logo-text p {
    font-size: 14px;
  }
  .dashboard-container .stat-value {
    font-size: 18px;
  }
  .dashboard-container .stat-label {
    font-size: 12px;
  }
  .dashboard-container .tab-subtitle {
    font-size: 16px;
  }
  .dashboard-container .excluded-list {
    columns: 1;
    padding-bottom: 25px;
  }
  .dashboard-container .footer-links {
    flex-direction: column;
    align-items: center;
  }
  .dashboard-container .footer-links a {
    margin: 5px 0;
  }
  .dashboard-container .excluded-cities-container {
    max-height: 200px;
  }
}
.dashboard-container {
  /* هواتف صغيرة جداً */
}
@media (max-width: 375px) {
  .dashboard-container .dashboard-container {
    padding: 0 10px;
  }
  .dashboard-container .tab-item {
    padding: 10px 12px;
    font-size: 12px;
  }
  .dashboard-container .tab-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
    margin-left: 6px;
  }
  .dashboard-container .logo-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .dashboard-container .logo-text h1 {
    font-size: 20px;
  }
  .dashboard-container .header-stat {
    padding: 8px 12px;
  }
  .dashboard-container .tab-content {
    padding: 15px;
  }
  .dashboard-container .shipping-table-container {
    margin-left: -5px;
    margin-right: -5px;
    border-radius: 8px;
  }
  .dashboard-container .zone-badge {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 60px;
  }
}
.dashboard-container {
  /* تحسينات للعرض على الشاشات الضيقة */
}
@media (max-height: 600px) and (orientation: landscape) {
  .dashboard-container {
    /*  .simple-header {
        padding: 10px 0;
        margin-bottom: 15px;
      }*/
    /*
    .logo-section {
      padding: 0 10px;
    }
    */
  }
  .dashboard-container .modern-tabs-container {
    margin-bottom: 15px;
  }
  .dashboard-container .tab-content {
    padding: 15px 25px;
  }
  .dashboard-container .excluded-cities-container {
    max-height: 150px;
  }
}
.dashboard-container .shipping_company_settings h4 {
  font-weight: bold;
  font-size: 18px;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 15px 0;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box label {
  font-size: 14px;
  font-weight: 600;
  min-width: 195px;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box input:not(.form-check-input), .dashboard-container .shipping_company_settings .company_settings_container .setting_box select {
  width: 150px;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box .form-check.form-switch {
  width: auto;
  flex-shrink: 0;
  padding: 0;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box .form-check.form-switch .form-check-input {
  width: 40px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box .input-group {
  display: flex;
  flex-flow: row;
  width: 180px;
  flex-shrink: 0;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box .input-group input {
  width: auto;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box > .d-flex {
  width: auto;
  gap: 8px;
  align-items: center;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box > .d-flex input {
  width: 130px;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box.cod_commission_box {
  gap: 80px;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box.cod_commission_box div {
  display: flex;
  align-items: center;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box.cod_commission_box div .shipment_custom_prices {
  width: 90px;
  text-align: center;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box .checkbox {
  margin: 0;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box .checkbox .switchery {
  border-radius: 25px;
  height: 24px;
  width: 50px;
}
.dashboard-container .shipping_company_settings .company_settings_container .setting_box .checkbox .switchery > small {
  height: 18px;
  top: 3px;
  width: 18px;
}
.dashboard-container {
  /* Packaging Items Horizontal Layout */
}
.dashboard-container .packaging-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
  padding-bottom: 60px;
  height: 60vh;
  overflow: auto;
}
.dashboard-container .packaging-grid .packaging-item {
  display: flex;
  flex-direction: row;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  border: 1px solid var(--light-gray);
}
.dashboard-container .packaging-grid .packaging-item .packaging-img {
  width: 115px;
  background-color: #f8f9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-left: 1px solid #f0f2ff;
}
.dashboard-container .packaging-grid .packaging-item .packaging-img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: cover;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info {
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--dark);
  margin-bottom: 8px;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-details {
  color: var(--gray);
  font-size: 12px;
  margin-bottom: 8px;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price {
  font-weight: 800;
  font-size: 18px;
  color: var(--primary);
  margin-top: auto;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .price-value {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #4A90E2;
  text-align: start;
  margin-bottom: 12px;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 8px;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .quantity-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-flow: row-reverse;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .quantity-controls .quantity-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #333;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .quantity-controls .quantity-btn:hover {
  background: #e9ecef;
  border-color: #4A90E2;
  color: #4A90E2;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .quantity-controls .quantity-btn:active {
  transform: scale(0.95);
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .quantity-controls .quantity-input {
  width: 50px;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: #fff;
  -moz-appearance: textfield;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .quantity-controls .quantity-input::-webkit-outer-spin-button,
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .quantity-controls .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .total-price-display {
  text-align: left;
  display: flex;
  justify-content: flex-start;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .total-price-display .total-price {
  display: block;
  font-size: 15px;
  color: #666;
  font-weight: 600;
  min-height: 20px;
}
.dashboard-container .packaging-grid .packaging-item .packaging-info .packaging-price .quantity-section .total-price-display .total-price:not(:empty) {
  color: #27ae60;
  font-weight: 700;
}
.dashboard-container .packaging-grid .packaging-item:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
  border-color: var(--primary-light);
}
.dashboard-container {
  /* تنسيق قسم طلب الواتس اب الثابت */
}
.dashboard-container .fixed-whatsapp-section {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-60%);
  width: 90%;
  max-width: 800px;
  background: #fff;
  border-radius: 12px;
  padding: 15px 20px;
  border: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.dashboard-container .fixed-whatsapp-section .whatsapp-order-btn {
  background: #25D366;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  min-width: 180px;
}
.dashboard-container .fixed-whatsapp-section .whatsapp-order-btn i {
  font-size: 18px;
}
.dashboard-container .fixed-whatsapp-section .whatsapp-order-btn:hover {
  background: #128C7E;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.dashboard-container .fixed-whatsapp-section .whatsapp-order-btn:active {
  transform: translateY(0);
}
.dashboard-container .fixed-whatsapp-section .order-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}
.dashboard-container .fixed-whatsapp-section .order-summary .total-items,
.dashboard-container .fixed-whatsapp-section .order-summary .total-amount {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}
.dashboard-container .fixed-whatsapp-section .order-summary .total-items #totalItems,
.dashboard-container .fixed-whatsapp-section .order-summary .total-amount #totalAmount {
  font-weight: 700;
  color: #4A90E2;
}
.dashboard-container {
  /* تنسيق الإشعارات المعدل */
}
.dashboard-container .packaging-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-width: 400px;
  width: 90%;
  pointer-events: none;
}
.dashboard-container .packaging-notification.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.dashboard-container .packaging-notification-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
.dashboard-container .packaging-notification-icon {
  font-size: 24px;
  color: #4CAF50;
  flex-shrink: 0;
}
.dashboard-container .packaging-notification-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.dashboard-container {
  /* تنسيق للأجهزة المحمولة */
}
@media (max-width: 768px) {
  .dashboard-container .packaging-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  .dashboard-container .packaging-grid .packaging-item {
    padding: 12px;
    align-items: center;
  }
  .dashboard-container .packaging-grid .packaging-item .packaging-img {
    height: 70px;
    width: 70px;
    margin-bottom: 12px;
  }
  .dashboard-container .packaging-grid .packaging-item .packaging-img img {
    width: 100%;
    height: 100%;
  }
  .dashboard-container .packaging-name {
    font-size: 15px;
  }
  .dashboard-container .packaging-details {
    font-size: 12px;
  }
  .dashboard-container .quantity-section {
    flex-direction: row;
    gap: 8px;
    padding: 6px;
  }
  .dashboard-container .quantity-controls {
    justify-content: flex-end;
  }
  .dashboard-container .quantity-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .dashboard-container .quantity-input {
    width: 45px;
    height: 30px;
    font-size: 13px;
  }
  .dashboard-container .total-price {
    font-size: 14px;
  }
  .dashboard-container .fixed-whatsapp-section {
    flex-direction: column;
    text-align: center;
    padding: 15px;
    width: 95%;
    bottom: 60px;
    transform: translateX(-50%);
  }
  .dashboard-container .fixed-whatsapp-section .order-summary {
    text-align: center;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }
  .dashboard-container .whatsapp-order-btn {
    width: 100%;
    min-width: auto;
  }
  .dashboard-container .packaging-notification {
    width: 85%;
    padding: 15px 20px;
  }
  .dashboard-container .packaging-notification-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .dashboard-container .packaging-notification-icon {
    font-size: 22px;
  }
  .dashboard-container .packaging-notification-text {
    font-size: 14px;
  }
}
.dashboard-container {
  /*
  @media (max-width: 480px) {
    .packaging-grid {
      grid-template-columns: 1fr;
    }

    .packaging-item {
      padding: 10px;
    }

    .whatsapp-order-btn {
      font-size: 15px;
      padding: 10px 20px;
    }

    .order-summary {
      flex-direction: column;
      gap: 5px;
    }

    .tab-pane {
      padding-bottom: 140px;
    }
  }
  */
}

.add-shipping-company .city-tree-container {
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  margin-top: 5px;
}
.add-shipping-company .city-tree-container.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.add-shipping-company .city-tree-search-wrap {
  padding: 0;
  border-bottom: 1px solid #eee;
}
.add-shipping-company .city-tree-search {
  border: none !important;
  border-radius: 4px 4px 0 0 !important;
  box-shadow: none !important;
  padding: 8px 12px;
  font-size: 13px;
}
.add-shipping-company .city-tree-body {
  max-height: 300px;
  overflow-y: auto;
  padding: 5px 0;
}
.add-shipping-company .city-tree-body ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.add-shipping-company .city-tree-body li {
  padding: 2px 0;
}
.add-shipping-company .city-tree-body label {
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  font-weight: normal;
}
.add-shipping-company .city-tree-body label.ct-parent {
  font-weight: 600;
}
.add-shipping-company .city-tree-children {
  padding-left: 24px !important;
  padding-right: 0 !important;
}
.add-shipping-company .city-tree-children--collapsed {
  display: none;
}
.add-shipping-company .city-tree-toggle {
  cursor: pointer;
  display: inline-block;
  width: 18px;
  text-align: center;
  font-size: 11px;
  color: #888;
  transition: transform 0.15s;
}
.add-shipping-company .city-tree-toggle.collapsed {
  transform: rotate(-90deg);
}
.add-shipping-company .city-tree-count {
  color: #999;
  font-size: 0.8em;
  margin-left: 4px;
}
.add-shipping-company .city-tree-node--hidden {
  display: none;
}
.add-shipping-company .city-tree-empty {
  padding: 10px;
  text-align: center;
  color: #999;
}

html[dir=rtl] .city-tree-children {
  padding-left: 0 !important;
  padding-right: 24px !important;
}

html[dir=rtl] .city-tree-toggle.collapsed {
  transform: rotate(90deg);
}

html[dir=rtl] .city-tree-count {
  margin-left: 0;
  margin-right: 4px;
}

.pkg-video-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
  border: 1px solid #d0e8ff;
  border-radius: var(--border-radius, 10px);
  padding: 14px 16px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.pkg-video-banner:hover {
  box-shadow: 0 4px 16px rgba(52, 143, 226, 0.15);
}
.pkg-video-banner .pkg-video-thumb {
  position: relative;
  width: 150px;
  min-width: 150px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.pkg-video-banner .pkg-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pkg-video-banner .pkg-video-thumb .pkg-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}
.pkg-video-banner .pkg-video-thumb .pkg-video-play i {
  font-size: 14px;
  color: #fff;
  background: rgba(52, 143, 226, 0.9);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 3px;
  transition: transform 0.2s;
}
.pkg-video-banner .pkg-video-thumb:hover .pkg-video-play i {
  transform: scale(1.1);
}
.pkg-video-banner .pkg-video-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pkg-video-banner .pkg-video-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--shipping-dark, #1a2229);
  margin: 0;
}
.pkg-video-banner .pkg-video-desc {
  font-size: 13px;
  color: #666;
  margin: 0;
}
.pkg-video-banner .pkg-video-btn {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  color: #5b6fe0;
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #348fe2, #7c5cbf) border-box;
  transition: box-shadow 0.2s;
}
.pkg-video-banner .pkg-video-btn i {
  font-size: 11px;
}
.pkg-video-banner .pkg-video-btn:hover {
  box-shadow: 0 2px 10px rgba(100, 80, 200, 0.25);
}
@media (max-width: 600px) {
  .pkg-video-banner {
    flex-direction: column;
    padding: 12px;
  }
  .pkg-video-banner .pkg-video-thumb {
    width: 100%;
    min-width: unset;
    height: 170px;
  }
  .pkg-video-banner .pkg-video-btn {
    align-self: stretch;
    justify-content: center;
  }
}

html[dir=rtl] .city-tree-count {
  margin-left: 0;
  margin-right: 4px;
}

.help-center .help-center-banner {
  display: flex;
  align-items: center;
}
.help-center .help-center-banner .img-box {
  flex: 1;
  max-width: 25%;
}
.help-center .help-center-banner .help-data {
  flex: 2;
}
.help-center .help-center-banner .help-data h1, .help-center .help-center-banner .help-data h2 {
  color: #fff;
  text-align: start;
  margin-bottom: 15px;
}
.help-center .help-center-banner .help-data h1 {
  margin-top: 0;
  font-weight: bold;
}
.help-center .help-center-banner .help-data p {
  font-size: 14px;
}
.help-center .help-center-banner .help-data .input-search {
  position: relative;
  width: 100%;
}
.help-center .help-center-banner .help-data .input-search .form-control {
  width: 100%;
  padding-left: 40px;
  height: 45px;
}
.help-center .help-center-banner .help-data .input-search .search-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #b5c1cb;
}
.help-center .help-center-banner .help-data input::placeholder {
  font-size: 16px;
}
@media (max-width: 575.98px) {
  .help-center .help-center-banner {
    display: block;
    text-align: center;
  }
  .help-center .help-center-banner .img-box {
    max-width: 90%;
    margin: auto auto 20px;
  }
  .help-center .help-center-banner .help-data h1, .help-center .help-center-banner .help-data h2 {
    text-align: center;
  }
  .help-center .help-center-banner .help-data h1 {
    margin: 0 auto 15px;
    font-size: 26px;
    font-weight: bold;
  }
  .help-center .help-center-banner .help-data h2 {
    font-size: 20px;
  }
  .help-center .help-center-banner .help-data p {
    font-size: 14px;
    margin-bottom: 20px;
  }
}
@media (max-width: 567px) {
  .help-center .accordion-row {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }
  .help-center .accordion-row .col-lg-3 {
    padding: 0 !important;
  }
}
.help-center .accordion {
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 15px;
  max-height: 90vh;
  overflow: auto;
}
.help-center .accordion section {
  border-bottom: 1px dashed #fff;
}
.help-center .accordion section .accordion-header {
  background: #f8f9fa;
  padding: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.help-center .accordion section .accordion-header h4 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #3a4f62;
  gap: 5px;
}
.help-center .accordion section .accordion-header h4 svg, .help-center .accordion section .accordion-header h4 i {
  width: 30px;
  text-align: center;
}
.help-center .accordion section .accordion-header span svg, .help-center .accordion section .accordion-header span i {
  width: 25px;
  height: 25px;
  padding: 5px;
  border-radius: 50%;
}
.help-center .accordion section .accordion-header span i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.75rem;
}
.help-center .accordion section .accordion-header span .fa-plus {
  border: 2px solid #ccd5df;
  color: #a2b0bf;
}
.help-center .accordion section .accordion-header span .fa-minus {
  border: 2px solid #348fe2;
  color: #348fe2;
}
.help-center .accordion section .accordion-header:hover, .help-center .accordion section .accordion-header:active, .help-center .accordion section .accordion-header:focus {
  background: #edf6ff;
}
.help-center .accordion section:last-of-type {
  border-bottom: none;
}
.help-center .accordion .accordion-body {
  padding: 15px;
  display: none;
  background: #fff;
}
.help-center .accordion .accordion-body div a {
  display: block;
  padding: 9px 15px;
  color: #6c869c;
  font-size: 0.875rem;
}
.help-center .accordion .accordion-body div a:hover {
  font-weight: bold;
  color: #348fe2;
}
.help-center .accordion .accordion-body div a.active {
  font-weight: bold;
  color: #348fe2;
}
.help-center .accordion .toggle-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}
.help-center .order-data img {
  width: 90% !important;
  margin: 15px auto;
  border-radius: 7px;
}
.help-center .order-data p {
  font-size: 16px;
  line-height: 2;
  color: #5e656b;
  font-weight: 500;
}
.help-center .order-data ol, .help-center .order-data ul {
  line-height: 2;
  font-size: 14px;
}
.help-center .order-data ol li, .help-center .order-data ul li {
  margin-bottom: 10px;
}
.help-center .order-data ol li p, .help-center .order-data ul li p {
  margin-bottom: 0;
}
.help-center .order-data ol li ul li, .help-center .order-data ol li ol li, .help-center .order-data ul li ul li, .help-center .order-data ul li ol li {
  margin-bottom: 5px;
}

.affiliates-modal .modal-dialog .modal-body {
  text-align: start !important;
  line-height: 2;
}
.affiliates-modal .modal-dialog .modal-body .affiliates-massage-container {
  padding: 20px;
  background-color: #e5f3ff;
  border-radius: 7px;
  font-weight: 500;
}
.affiliates-modal .modal-dialog .modal-body .affiliates-massage-container h4, .affiliates-modal .modal-dialog .modal-body .affiliates-massage-container p, .affiliates-modal .modal-dialog .modal-body .affiliates-massage-container div {
  color: #4c677d;
}
.affiliates-modal .modal-dialog .modal-body .affiliates-massage-container h4 strong, .affiliates-modal .modal-dialog .modal-body .affiliates-massage-container p strong, .affiliates-modal .modal-dialog .modal-body .affiliates-massage-container div strong {
  color: #348fe2;
}
.affiliates-modal .modal-dialog .modal-body .affiliates-massage-container .link-container {
  line-height: 1.6;
  margin-bottom: 10px;
}
.affiliates-modal .modal-dialog .modal-body .affiliates-massage-container .link-container p {
  margin-bottom: 0;
}
.affiliates-modal .modal-dialog .modal-body .affiliates-massage-container .link-container a {
  font-weight: bold;
}
.affiliates-modal .modal-dialog .modal-body .share-clipboard {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #348fe2;
  color: #fff;
  margin-top: 15px;
  gap: 5px;
}
.affiliates-modal .modal-dialog .modal-body .share-clipboard:hover {
  background-color: #2d353c;
  color: #fff;
}

#summary-page .panel {
  border-radius: 8px;
}
#summary-page .panel .card-body {
  padding: 60px;
}
#summary-page .panel .card-body .progress-box .progress-container {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 20px;
  gap: 20px;
}
#summary-page .panel .card-body .progress-box .progress-container .progress-svg {
  width: 70px;
  height: 70px;
  position: relative;
}
#summary-page .panel .card-body .progress-box .progress-container .progress-svg .progress-circle {
  transition: stroke-dashoffset 0.35s ease-in-out;
}
#summary-page .panel .card-body .progress-box .progress-bar-container {
  width: 100%;
  margin: 20px auto;
  background-color: #e0e0e0;
  border-radius: 7px;
  height: 12px;
  overflow: hidden;
}
#summary-page .panel .card-body .progress-box .progress-bar {
  height: 100%;
  background-color: #348fe2;
  width: 0;
  transition: width 0.35s ease-in-out;
}
#summary-page .panel .card-body .progress-box .progress-text {
  font-size: 20px;
  color: #65798b;
}
#summary-page .panel .card-body .progress-box .message {
  font-size: 16px;
  color: #348fe2;
  margin-bottom: 30px;
  text-align: center;
}
#summary-page .panel .card-body .steps-list {
  list-style: none;
  padding: 0;
}
#summary-page .panel .card-body .steps-list .step {
  margin-bottom: 15px;
}
#summary-page .panel .card-body .steps-list .step a {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border: 1px solid #ecf1f6;
  border-radius: 8px;
  text-decoration: none;
  color: #4c5a66;
  transition: background-color 0.3s, box-shadow 0.3s;
  gap: 12px;
}
#summary-page .panel .card-body .steps-list .step .step-icon {
  color: #348fe2;
  background-color: #eff7ff;
  border: 1px solid #c4d9ed;
  font-size: 22px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  flex-shrink: 0;
}
#summary-page .panel .card-body .steps-list .step .step-text {
  flex-grow: 1;
  font-weight: bold;
  font-size: 18px;
  color: #4c5a66;
}
#summary-page .panel .card-body .steps-list .step .step-check {
  color: #348fe2;
  font-size: 22px;
}
#summary-page .panel .card-body .steps-list .step.completed a {
  background-color: #f5faff;
  border-color: #ecf1f6;
}
#summary-page .panel .card-body .steps-list .step.completed a .step-icon {
  background-color: #348fe2;
  color: #fff;
  border-color: #348fe2;
}
#summary-page .additional-steps {
  margin-top: 30px;
  padding: 15px 25px;
  background-color: #f8fbff;
  border: 1px solid #ecf1f6;
  border-radius: 10px;
}
#summary-page .additional-steps h3 {
  font-size: 20px;
  color: #5c6e7e;
  margin-bottom: 20px;
  margin-top: 0;
}
#summary-page .additional-steps h3 .optional-label {
  font-size: 14px;
  color: #999;
  font-weight: normal;
}
#summary-page .additional-steps .additional-step {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
  text-decoration: none;
  color: #333;
  margin-bottom: 8px;
  transition: background-color 0.3s;
  gap: 10px;
}
#summary-page .additional-steps .additional-step .step-icon {
  color: #95aaba;
  font-size: 22px;
}
#summary-page .additional-steps .additional-step .step-content {
  flex-grow: 1;
}
#summary-page .additional-steps .additional-step .step-content .step-title {
  font-size: 16px;
  font-weight: bold;
  color: #697177;
}
#summary-page .additional-steps .additional-step .step-content .step-description {
  font-size: 13px;
  color: #969ea4;
  margin-top: 5px;
}
#summary-page .additional-steps .additional-step:hover {
  background-color: #eaf3ff;
}

@media (max-width: 767.98px) {
  #summary-page .panel {
    border-radius: 8px;
  }
  #summary-page .panel .card-body {
    padding: 10px;
  }
  #summary-page .panel .card-body .progress-box .progress-container {
    margin-bottom: 10px;
    gap: 10px;
  }
  #summary-page .panel .card-body .progress-box .progress-container .progress-svg {
    width: 60px;
    height: 60px;
  }
  #summary-page .panel .card-body .progress-box .progress-bar-container {
    margin: 10px auto;
    height: 9px;
  }
  #summary-page .panel .card-body .progress-box .progress-text {
    font-size: 16px;
    color: #65798b;
  }
  #summary-page .panel .card-body .steps-list .step {
    margin-bottom: 10px;
  }
  #summary-page .panel .card-body .steps-list .step a {
    padding: 10px;
    gap: 8px;
  }
  #summary-page .panel .card-body .steps-list .step .step-icon {
    font-size: 18px;
    width: 40px;
    height: 40px;
  }
  #summary-page .panel .card-body .steps-list .step .step-text {
    font-size: 16px;
  }
  #summary-page .panel .card-body .steps-list .step .step-check {
    font-size: 18px;
  }
  #summary-page .additional-steps {
    margin-top: 20px;
    padding: 10px 15px;
    border-radius: 8px;
  }
  #summary-page .additional-steps h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  #summary-page .additional-steps h3 .optional-label {
    font-size: 12px;
  }
  #summary-page .additional-steps .additional-step {
    padding: 10px;
    gap: 7px;
  }
  #summary-page .additional-steps .additional-step .step-icon {
    font-size: 20px;
  }
  #summary-page .additional-steps .additional-step .step-content .step-title {
    font-size: 14px;
  }
  #summary-page .additional-steps .additional-step .step-content .step-description {
    font-size: 12px;
  }
}
.widget.widget-stats {
  min-height: 110px;
}
.widget.widget-stats .stats-info {
  min-height: 43px;
}

.kpi-tiles .kpi-card {
  min-height: 120px;
  align-items: center;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-tiles .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.kpi-tiles .kpi-card__top {
  justify-content: center;
  gap: 10px;
}
.kpi-tiles .kpi-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #1f2937;
}
.kpi-tiles .kpi-card__hint {
  font-size: 12px;
  line-height: 1.4;
  color: #7b8794;
}
.kpi-tiles .kpi-card__foot {
  justify-content: center;
  margin-top: auto;
}
.kpi-tiles .kpi-card__note {
  text-align: center;
}
.kpi-tiles .kpi-card--locked {
  opacity: 0.72;
}
.kpi-tiles .kpi-card__pill--soft {
  line-height: 1.3;
  text-align: center;
}

.funnels-slug-prefix .slug-prefix {
  height: 97%;
  background-color: #e6f3ff;
  color: #767a7e;
  padding: 10px;
  left: 1px;
  direction: ltr;
}
.funnels-slug-prefix .slug-input {
  padding-left: 250px;
  color: #348fe2;
  font-weight: bold;
}

.funnel-templates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 767px) {
  .funnel-templates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 479px) {
  .funnel-templates {
    grid-template-columns: 1fr;
  }
}

.funnel-template {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.funnel-template:hover {
  border-color: #b9d6f2;
}
.funnel-template:has(.funnel-template__input:checked) {
  border-color: #348fe2;
  box-shadow: 0 0 0 2px rgba(52, 143, 226, 0.22);
}
.funnel-template__media {
  position: relative;
  aspect-ratio: 3/4;
  background: #f4f6fa;
  overflow: hidden;
}
.funnel-template__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.funnel-template__media--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #adb5bd;
}
.funnel-template__media--empty i, .funnel-template__media--empty svg {
  font-size: 1.7em;
}
.funnel-template__sections {
  align-self: stretch;
  padding: 12px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #6c757d;
  text-align: start;
}
.funnel-template__body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
}
.funnel-template__input {
  flex: 0 0 auto;
  margin-top: 3px;
}
.funnel-template__name {
  font-weight: 700;
  line-height: 1.3;
  color: #2d353c;
}
.funnel-template__desc {
  margin: -2px 12px 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #6c757d;
}

#product_id + .select2 .select2-selection--single {
  height: auto;
  min-height: 38px;
}
#product_id + .select2 .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  padding-top: 4px;
  padding-bottom: 4px;
}

.invoice-modern {
  --inv-ink: #1f2733;
  --inv-muted: #98a2b3;
  --inv-soft: #f6f7f9;
  --inv-line: #e7eaee;
  --inv-accent: #4f46e5;
  background: #eceef1;
  padding: 40px 16px;
  min-height: 100vh;
  font-family: "Cairo", sans-serif;
}
.invoice-modern * {
  box-sizing: border-box;
}
.invoice-modern button, .invoice-modern input, .invoice-modern select, .invoice-modern textarea {
  font-family: inherit;
}
.invoice-modern .invoice-card {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--inv-line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(24, 39, 75, 0.08);
  padding: 44px 48px;
  color: var(--inv-ink);
  font-size: 15px;
  line-height: 1.6;
}
.invoice-modern .inv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--inv-line);
}
.invoice-modern .inv-head__id h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.invoice-modern .inv-head__store {
  display: block;
  margin-top: 4px;
  color: var(--inv-muted);
  font-size: 14px;
}
.invoice-modern .inv-head__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.invoice-modern .inv-status {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  background: #eef1f5;
  color: #566;
}
.invoice-modern .inv-status--success {
  background: #e7f6ed;
  color: #17864a;
}
.invoice-modern .inv-status--warning {
  background: #fdf3e0;
  color: #a5670a;
}
.invoice-modern .inv-status--danger {
  background: #fdecec;
  color: #c0392b;
}
.invoice-modern .inv-status--info,
.invoice-modern .inv-status--primary {
  background: #e8f1fd;
  color: #1d6fd0;
}
.invoice-modern .inv-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--inv-line);
  border-radius: 10px;
  background: #fff;
  color: var(--inv-ink);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.invoice-modern .inv-print-btn:hover {
  background: var(--inv-soft);
}
.invoice-modern .inv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--inv-line);
}
.invoice-modern .inv-field__label {
  display: block;
  margin-bottom: 5px;
  color: var(--inv-muted);
  font-size: 12.5px;
}
.invoice-modern .inv-field__value {
  display: block;
  font-weight: 500;
  color: var(--inv-ink);
}
.invoice-modern .inv-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
}
.invoice-modern .inv-table thead th {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--inv-line);
  color: var(--inv-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: start;
}
.invoice-modern .inv-table thead th:last-child {
  text-align: end;
}
.invoice-modern .inv-table tbody td {
  padding: 16px 0;
  border-bottom: 1px solid var(--inv-line);
  vertical-align: top;
}
.invoice-modern .inv-table tbody td:last-child {
  text-align: end;
  font-weight: 600;
  white-space: nowrap;
}
.invoice-modern .inv-table small {
  color: var(--inv-muted);
  font-weight: 400;
}
.invoice-modern .inv-totals {
  margin: 22px 0 4px auto;
  width: min(340px, 100%);
}
.invoice-modern .inv-totals__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  color: #4a5568;
}
.invoice-modern .inv-totals__row span:last-child {
  white-space: nowrap;
}
.invoice-modern .inv-totals__strike {
  text-decoration: line-through;
  color: var(--inv-muted);
}
.invoice-modern .inv-totals__row--total {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--inv-line);
  font-weight: 700;
  color: var(--inv-ink);
  font-size: 17px;
}
.invoice-modern .inv-attachment {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--inv-line);
}
.invoice-modern .inv-attachment__label {
  display: block;
  margin-bottom: 10px;
  color: var(--inv-muted);
  font-size: 12.5px;
}
.invoice-modern .inv-attachment__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--inv-line);
  border-radius: 12px;
  max-width: 380px;
}
.invoice-modern .inv-attachment__thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--inv-soft);
  flex-shrink: 0;
}
.invoice-modern .inv-attachment__name {
  font-weight: 600;
  font-size: 14px;
}
.invoice-modern .inv-attachment__link {
  margin-inline-start: auto;
  color: var(--inv-accent);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .invoice-modern {
    padding: 16px 8px;
  }
  .invoice-modern .invoice-card {
    padding: 28px 20px;
  }
  .invoice-modern .inv-grid {
    grid-template-columns: 1fr;
  }
  .invoice-modern .inv-head {
    flex-direction: column;
  }
}

@media print {
  .invoice-modern {
    background: #fff !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .invoice-modern .invoice-card {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 12px;
  }
  .invoice-modern .inv-print-btn {
    display: none !important;
  }
}
/*end pages style*/
/*start pages style*/
.items-stats {
  position: absolute;
  bottom: 5px;
  left: 10px;
  color: #fff !important;
  background: #348fe2 !important;
}

.accordion-toggle h4 a svg {
  color: #348fe2;
  margin: 3px;
}
.accordion-toggle svg, .accordion-toggle i {
  font-size: 15px;
}

#modal-dialog-edit-category .modal-body {
  display: block;
  text-align: start;
  min-height: 0;
}
#modal-dialog-edit-category .select2-container {
  width: 100% !important;
}

.topics .topics-heading {
  background-color: #242a30 !important;
}

.card-header.note-toolbar > .btn-group {
  margin-left: 0;
  margin-right: 0;
}

.view-stats {
  display: flex;
  align-items: center;
  margin-left: 50px;
}
.view-stats .checkbox .switchery {
  height: 24px;
  width: 44px;
  display: flex;
  align-items: center;
}
.view-stats .checkbox .switchery small {
  height: 24px;
  width: 24px;
  left: 10px;
}
.view-stats a {
  font-size: 18px;
}
.view-stats a:hover {
  color: #348fe2;
}

#fileupload .col-md-12 {
  text-align: center;
}
#fileupload .fileinput-button {
  height: 40px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
#fileupload .fileinput-button svg {
  margin: 0 5px;
}
#fileupload .fileupload-buttonbar button, #fileupload .template-upload button, #fileupload .template-download button {
  float: none;
}
#fileupload .fileupload-buttonbar button span, #fileupload .template-upload button span, #fileupload .template-download button span {
  height: auto;
  padding: 0 3px;
}

.note-toolbar button span {
  height: auto;
}
.note-toolbar .note-color {
  margin-top: 0;
}
.note-toolbar .note-color .note-btn-group {
  border: 1px solid #ccc;
}
.note-toolbar .note-color .note-btn-group button {
  border: none;
}
.note-toolbar .note-color .note-btn-group .dropdown-toggle {
  width: 35px;
  padding-right: 0;
}
.note-toolbar .note-color .note-btn-group .dropdown-toggle span {
  padding: 0;
}

@media (max-width: 567px) {
  .note-color {
    margin-top: 5px;
  }
}
.pe-edit .pe-card-categories .panel-group {
  margin: 0;
}
.pe-edit .pe-card-categories .panel-group > .card {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.pe-edit .pe-card-categories .panel-group .card-header {
  display: none !important;
}
.pe-edit .pe-savebar {
  align-items: center;
}
.pe-edit .pe-savebar .btn {
  margin: 0;
}
.pe-edit .card-inverse {
  position: relative;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-top: 16px;
}
.pe-edit .card-inverse > .card-header {
  background: #fff !important;
  border-bottom: 1px solid #eef2f6;
  padding: 16px 18px;
}
.pe-edit .card-inverse > .card-header .card-title {
  color: #2d353c;
  font-weight: 700;
  font-size: 15px;
  margin: 0;
}
.pe-edit .card-inverse > .card-body {
  padding: 16px 18px 18px;
}
.pe-edit .card-inverse .fileupload-buttonbar .btn {
  margin: 0 0 6px;
}
.pe-edit .card-inverse .note-info {
  border-radius: 8px;
}

.item-price {
  color: #337ab7;
  font-size: 15px;
}

.item-price small {
  text-decoration: line-through;
  color: #707478;
}

.item-price span {
  color: #337ab7;
  font-size: 12px;
}

.edit-category-collapse-btn {
  margin: 0 10px;
}

.gaping {
  gap: 1rem;
}

.transparent {
  background-color: transparent;
}
.transparent:focus, .transparent:hover {
  color: #fff;
}

.dropdown_Menu_actions {
  font-weight: bold;
  border: none;
  padding: 0;
}
.dropdown_Menu_actions .btn-primary.dropdown-toggle {
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.dropdown_Menu_actions .dropdown-menu {
  min-width: 230px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px !important;
}
.dropdown_Menu_actions .dropdown-menu li.btn {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  background: none;
  box-shadow: none;
}
.dropdown_Menu_actions .dropdown-menu li a, .dropdown_Menu_actions .dropdown-menu li button {
  display: flex;
  justify-content: start;
  width: 100%;
  text-decoration: none;
  color: #1c1b1b;
  transition: all 1s ease-in-out;
  gap: 5px;
  font-weight: normal;
  text-align: start;
  padding: 0;
  font-size: 12px;
  min-height: 30px;
  margin: 0;
}
.dropdown_Menu_actions .dropdown-menu li a:hover, .dropdown_Menu_actions .dropdown-menu li button:hover {
  background-color: #f2f4f7;
  color: #333;
}
.dropdown_Menu_actions .dropdown-menu li a i,
.dropdown_Menu_actions .dropdown-menu li a svg, .dropdown_Menu_actions .dropdown-menu li a i, .dropdown_Menu_actions .dropdown-menu li button i,
.dropdown_Menu_actions .dropdown-menu li button svg, .dropdown_Menu_actions .dropdown-menu li button i {
  color: #a9a8a8;
}
.dropdown_Menu_actions .dropdown-menu li a.is-locked, .dropdown_Menu_actions .dropdown-menu li button.is-locked {
  pointer-events: none;
  cursor: default;
}
.dropdown_Menu_actions .dropdown-menu li a.is-locked span i, .dropdown_Menu_actions .dropdown-menu li button.is-locked span i {
  color: #348fe2;
}
.dropdown_Menu_actions .dropdown-menu li a span, .dropdown_Menu_actions .dropdown-menu li button span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  padding: 0;
}
.dropdown_Menu_actions .dropdown-menu li a > div, .dropdown_Menu_actions .dropdown-menu li button > div {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.dropdown_Menu_actions .dropdown-menu li a > div p, .dropdown_Menu_actions .dropdown-menu li button > div p {
  font-size: 13px;
  color: #a9a8a8;
  margin: 1px 0 0 0;
}
.dropdown_Menu_actions .dropdown-menu li .dropdown-text-container div {
  gap: 7px;
}
.dropdown_Menu_actions .dropdown-menu li .dropdown-text-container div label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #2477c0;
  background-color: #eaf4fd;
  border: 1px solid #bfe0fb;
  border-radius: 20px;
  padding: 2px 9px;
  margin-bottom: 0;
  white-space: nowrap;
}
.dropdown_Menu_actions .dropdown-menu li .dropdown-text-container div label i {
  color: #2477c0;
  font-size: 10px;
}
.dropdown_Menu_actions .drop-btn {
  display: flex;
  align-items: center;
  width: 100%;
  color: #1c1b1b;
  transition: all 0.3s ease-in-out;
  margin-bottom: 8px;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 15px;
}
.dropdown_Menu_actions .drop-btn a {
  height: initial;
  min-height: initial;
  padding: 5px !important;
}
.dropdown_Menu_actions .drop-btn:hover, .dropdown_Menu_actions .drop-btn:focus {
  background-color: #d8efff !important;
  border-color: #348fe2;
  box-shadow: 0 2px 6px rgba(52, 143, 226, 0.1);
  color: #1a1a1a;
}
.dropdown_Menu_actions .drop-btn:last-of-type {
  margin-bottom: 0;
}

.dataTables_scrollBody {
  height: auto !important;
}

#data-table_wrapper .row:first-child {
  display: none;
}

.dataTables_scroll .form-control {
  width: 100%;
}
.dataTables_scroll .input-quantity .form-control {
  width: 75px;
}

@media (max-width: 576px) {
  .justify-products {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
  }
}
@media (min-width: 768px) {
  .justify-products {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
  }
}
@media (min-width: 992px) {
  .justify-products {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
  }
}
.dropdown_Menu_actions .dropdown-menu li:not(.drop-btn) {
  margin-bottom: 8px;
}
.dropdown_Menu_actions .dropdown-menu li:not(.drop-btn):last-child {
  margin-bottom: 0;
}
.dropdown_Menu_actions .dropdown-menu li:not(.drop-btn) a {
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}
.dropdown_Menu_actions .dropdown-menu li:not(.drop-btn) a:hover {
  background-color: #d8efff;
  color: #1a1a1a;
  box-shadow: 0 2px 6px rgba(52, 143, 226, 0.1);
}

.card-orders .header .actions-area .dropdown_Menu_actions .dropdown-menu li a {
  height: auto;
}

.card-orders .header .actions-area .dropdown_Menu_actions .dropdown-menu li.drop-btn a {
  align-items: flex-start;
  transition: all 0.2s ease-in-out;
}
.card-orders .header .actions-area .dropdown_Menu_actions .dropdown-menu li.drop-btn a:hover {
  background-color: #d8efff;
}

.card-orders .header .actions-area .dropdown_Menu_actions .dropdown-menu li.drop-btn strong {
  color: #1c1b1b;
  font-weight: 600;
}

.dropdown_Menu_actions .dropdown-menu.product-type-menu {
  min-width: 290px;
}
.dropdown_Menu_actions .dropdown-menu.product-type-menu .dropdown-text-container p {
  white-space: nowrap;
}

.create-panel {
  background-color: transparent;
}
.create-panel .row {
  margin-left: 0;
  margin-right: 0;
}
.create-panel .heading-create {
  background: #242a30 !important;
  color: #fff;
  margin-bottom: 10px;
}
.create-panel .heading-create h4 {
  color: #fff !important;
}
.create-panel .img-panel .card-header h4 {
  color: #2d353c;
}
.create-panel .card-header {
  background: #fafafa;
  display: flex;
  align-items: center;
  position: relative;
}
.create-panel .card-header h4 {
  font-weight: bold;
  font-size: 13px;
  display: inline-block;
  align-items: center;
  color: #fff;
  width: 100%;
}
.create-panel .card-header h4 label {
  font-size: 11px;
  color: #798b94;
  display: block;
  width: 95%;
}
.create-panel .card-header h4 label svg, .create-panel .card-header h4 label i {
  margin: 5px;
}
.create-panel .card-header h4 a {
  color: #348fe2;
}
.create-panel .card-header h4 a svg, .create-panel .card-header h4 a i {
  color: #348fe2;
  margin: 3px;
}
.create-panel .advanced-options .options-heading,
.create-panel .img-panel .options-heading {
  margin-bottom: 0;
  height: 60px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.create-panel .advanced-options {
  background-color: transparent;
}
.create-panel .advanced-options .options-heading a {
  float: none;
}
.create-panel .advanced-options .options-heading a span {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.create-panel .advanced-options .panel-collapse {
  background-color: #fff;
}
.create-panel .advanced-options #collapse-discount {
  position: relative;
  width: 97%;
}
.create-panel .advanced-options .control-discount {
  display: flex;
}
.create-panel .advanced-options .control-discount .form-group {
  width: max-content;
}
.create-panel .advanced-options .control-discount .form-group select {
  font-size: 10px;
  width: auto;
  padding: 3px 5px;
  margin-right: -5px;
}
.create-panel .advanced-options .discount-remove {
  background-color: #858585;
  padding: 0 10px;
  height: 25px;
  width: 25px;
  color: #fff;
  border: none;
  border-radius: 50%;
  margin-bottom: 5px;
  margin-top: 5px;
  position: absolute;
  left: -25px;
  top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: bolder;
}
.create-panel .advanced-options .discount-remove:hover {
  background-color: tomato;
}
@media (max-width: 567px) {
  .create-panel .discount-remove {
    left: -18px;
    top: 34px;
  }
  .create-panel .card-header {
    display: block;
  }
  .create-panel .card-header h4 {
    margin-bottom: 10px;
  }
  .create-panel .card-header .position-left {
    position: initial;
  }
}
.create-panel #cropImageThenUpload {
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  border: 1px dashed #000;
  border-radius: 7px;
}
.create-panel #cropImageThenUpload .alert-warning {
  display: block;
  position: absolute;
  bottom: 80px;
  width: 96%;
  left: 10px;
  right: 10px;
  margin-bottom: 0;
}
.create-panel #cropImageThenUpload #deleteImage {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 10px;
  color: #b14444;
  background: #ffd0cf;
  border-color: #bf6c6c;
}
.create-panel #cropImageThenUpload #deleteImage:hover {
  color: #fff;
  background: #ff5b57;
  border-color: #ff5b57;
}

.deleteBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 10px;
  color: #b14444 !important;
  background: #ffd0cf;
  border-color: #bf6c6c;
}
.deleteBtn:hover {
  color: #fff !important;
  background: #ff5b57;
  border-color: #ff5b57;
}

.options-section {
  padding: 30px;
}
.options-section .form-horizontal {
  margin-bottom: 20px;
}
.options-section .form-horizontal .option_value-container {
  border: 1px solid #ededed !important;
}
.options-section .form-horizontal .inner-option {
  background-color: #eff7ff;
  display: inline-block;
  padding: 30px;
  border: 1px solid #abbfd2;
  border-radius: 5px;
}
.options-section .form-horizontal .inner-option .picker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.options-section .form-horizontal .inner-option .colorpicker-component {
  width: initial !important;
}
.options-section .form-horizontal .inner-option .form-group {
  border-radius: 7px;
}
.options-section .form-horizontal .inner-option .form-group .d-flex {
  border-radius: 7px;
}
.options-section .form-horizontal .inner-option input,
.options-section .form-horizontal .inner-option .select2-container--default .select2-selection--single {
  border-radius: 0 !important;
  border: none;
}
.options-section .form-horizontal .inner-option .btn-new-value {
  background-color: transparent;
  border: 1px solid #37414b;
  color: #37414b;
  font-weight: bold;
  font-size: 10px;
  border-radius: 7px;
  padding: 0 8px;
  height: 35px;
  margin: initial;
}
.options-section .form-horizontal .inner-option .btn-save-value {
  background-color: #37414b;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  border-radius: 7px;
  height: 35px;
}
.options-section .form-horizontal .inner-option .btn-save-value:hover {
  color: #fff;
  background-color: #4ace71;
}
.options-section .form-horizontal .inner-option .option-type-price {
  position: relative;
}
.options-section .form-horizontal .inner-option .option-type-price:before {
  content: " ";
  top: 10px;
  right: 0;
  display: block;
  position: absolute;
  background-clip: content-box;
  width: 1px;
  height: 20px;
  background: #939393;
}
.options-section .form-horizontal .inner-option .option-type-price:after {
  content: " ";
  top: 10px;
  left: 0;
  display: block;
  position: absolute;
  background-clip: content-box;
  width: 2px;
  height: 20px;
  background: #939393;
}
.options-section .form-horizontal .inner-option .option_type_color {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  flex-shrink: 0;
}
.options-section .form-horizontal .inner-option .option_type_color .clr-field {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.options-section .form-horizontal .inner-option .option_type_color .clr-field input {
  height: 25px;
  width: 25px;
  cursor: pointer;
}
.options-section .form-horizontal .inner-option .option_type_color .clr-field button {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  cursor: pointer;
  right: initial;
}
.options-section .form-horizontal .inner-option .option_type_image .img-box img {
  object-fit: contain;
}
.options-section .form-horizontal .inner-option .btn-actions {
  margin-top: 12px;
  border-top: 1px solid #abbfd2;
  padding: 12px 0 0 0;
}
.options-section .form-horizontal .text-center {
  justify-content: initial;
}
.options-section #colorPick {
  background: rgba(255, 255, 255, 0.96);
  top: 40px;
  left: -10px;
  cursor: pointer;
}
.options-section #btn-option-colorpicker {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #333;
}
.options-section #btn-option-colorpicker .layout_default.picker_wrapper {
  width: 18em !important;
}
.options-section .picker_alpha .picker_selector {
  display: none;
}

.option-delete {
  background-color: transparent;
  color: #f68080;
  height: 35px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  margin: 0 5px 0 0;
}
.option-delete svg, .option-delete i {
  font-size: 14px;
  margin: 0 4px;
}
.option-delete:hover {
  color: #ff2121;
}

.position-left .option-delete {
  margin: 0 8px 0 8px;
}

.option-value-delete {
  color: #f68080;
  width: 40px;
  height: 40px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: #fff;
  font-size: 16px;
}
.option-value-delete:hover {
  color: #ff2121;
}

#add-new-option-div .btn-add {
  font-weight: 500;
}

.btn-edit-option {
  background-color: #348fe2;
  color: #fff;
  display: block;
  float: left;
  font-weight: bold;
  font-size: 12px;
}
.btn-edit-option:focus {
  background-color: #fff;
  color: #348fe2;
}
.btn-edit-option:hover {
  background-color: #fff;
  color: #348fe2;
}

.clr-picker {
  direction: ltr;
}

.ltr .options-section .form-horizontal .inner-option .option-type-price:before {
  right: initial;
  left: 0;
}
.ltr .options-section .form-horizontal .inner-option .option-type-price:after {
  right: 0;
  left: initial;
}
.ltr .options-section .form-horizontal .inner-option .option_type_color .clr-field button {
  right: inherit;
  left: initial;
}
.ltr .options-section #colorPick {
  left: initial;
  right: -10px;
}
.ltr .option-delete {
  margin: 0 0 0 5px;
}
.ltr .position-left {
  left: initial;
  right: 10px;
}
.ltr .btn-edit-option {
  float: right;
}

.options-control-translations-menu {
  float: none !important;
  display: flex;
  align-items: center;
}
.options-control-translations-menu .btn-edit-option {
  margin: 0 10px;
}

/* ===== Redesigned product options page — chip builder + pricing list ===== */
.po-card {
  background: #fff;
  border-radius: 8px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.po-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #2d353c;
}
.po-card-head i {
  color: #348fe2;
}

.po-note {
  background: #f4f9ff;
  border: 1px solid #dcebfb;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.po-note h4 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #2d353c;
}
.po-note p {
  margin: 0;
  font-size: 12.5px;
  color: #707070;
}

.po-option-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  background: #fcfdff;
  margin-bottom: 12px;
}

.po-field-name {
  width: 170px;
}

.po-field-type {
  width: 140px;
}

.po-field-values {
  flex: 1;
}

.po-field-actions {
  display: flex;
  flex-direction: column;
}

.po-actions-row {
  display: flex;
  gap: 6px;
}

.po-lbl {
  font-size: 11px;
  color: #939393;
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}

@media (max-width: 991px) {
  .po-option-row {
    flex-direction: column;
  }
  .po-field-name, .po-field-type, .po-field-values {
    width: 100%;
  }
  .po-field-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}
.po-chipbox {
  border: 1px solid #e6edf3;
  border-radius: 7px;
  padding: 7px;
  background: #fff;
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.po-chipbox .clr-field {
  display: inline-block;
  line-height: 0;
}
.po-chipbox .clr-field input.coloris {
  width: 34px;
  height: 20px;
  padding: 0;
  border: 1px solid #d4e6fb;
  border-radius: 5px;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  background: #fff;
}
.po-chipbox[data-type=image] .po-chip-add-image {
  display: inline-flex;
}
.po-chipbox[data-type=image] .po-chip-input {
  display: none;
}

.po-chip {
  position: relative;
  background: #f4f9ff;
  color: #316699;
  border: 1px solid #d4e6fb;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.po-chip-thumb {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
}

.po-chip-star {
  color: #cdd5dd;
  font-size: 11px;
  cursor: pointer;
}
.po-chip-star.is-default {
  color: #f0a800;
}

.po-chip-x {
  font-size: 10px;
  opacity: 0.55;
  cursor: pointer;
}

.po-chip-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  font-size: 12.5px;
  background: transparent;
}

.po-chip-title {
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #316699;
  field-sizing: content;
  width: auto;
  min-width: 30px;
  max-width: 100%;
}

.po-chip-add-image {
  display: none;
  background: #fafcff;
  border: 1px dashed #b9c4d0;
  color: #8a97a5;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  gap: 6px;
}

.po-color-hint, .po-image-hint {
  display: none;
  font-size: 11px;
  color: #939393;
  margin-top: 6px;
}
.po-color-hint i, .po-image-hint i {
  color: #348fe2;
  margin-inline-end: 3px;
}

.po-chipbox[data-type=color] ~ .po-color-hint {
  display: block;
}

.po-chipbox[data-type=image] ~ .po-image-hint {
  display: block;
}

.po-addopt {
  width: 100%;
  border: 1px dashed #9ec3ea;
  background: #f7fbff;
  color: #348fe2;
  height: 46px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.po-save-option, .po-delete-option {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.po-delete-option {
  border: 1px solid #f3c2c2;
  background: #fff5f5;
  color: #ff2121;
}
.po-delete-option:hover {
  background: #ff2121;
  color: #fff;
  border-color: #ff2121;
}

/* unsaved (dirty) option-row indicators */
.po-note .po-note-tip {
  margin: 8px 0 0;
  color: #F79737;
  font-weight: 600;
}
.po-note .po-note-tip i {
  color: #F79737;
  margin-inline-end: 4px;
}

.po-option-row.po-dirty .po-save-option {
  animation: poPulse 1.6s ease-in-out infinite;
}

@keyframes poPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(52, 143, 226, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(52, 143, 226, 0);
  }
}
.po-pricing {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid #eef2f6;
}

.po-genbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f4f9ff;
  border: 1px solid #dcebfb;
  border-radius: 8px;
  margin-bottom: 18px;
}
.po-genbar .po-genbar-txt {
  flex: 1;
}
.po-genbar .po-genbar-txt strong {
  display: block;
  font-size: 13px;
  color: #2d353c;
}
.po-genbar .po-genbar-txt span {
  font-size: 11.5px;
  color: #939393;
}

.po-empty {
  padding: 18px;
  text-align: center;
}

.po-vtable thead th {
  background: #f6f6f6;
  color: #2d353c;
  font-weight: 700;
  font-size: 13px;
}
.po-vtable td, .po-vtable th {
  vertical-align: middle;
}
.po-vtable .form-control {
  height: 34px;
  font-size: 12.5px;
}
.po-vtable .c-option,
.po-vtable .c-option .upload-area,
.po-vtable .c-option .img-box {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  margin: 0 !important;
  padding: 0 !important;
}
.po-vtable .c-option .option-pic {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}

.po-off {
  opacity: 0.5;
}

.po-save-row {
  margin-top: 18px;
  text-align: start;
}

.po-flash {
  animation: poFlash 1.4s ease;
}

@keyframes poFlash {
  0%, 100% {
    background: transparent;
  }
  30% {
    background: #fff7e6;
  }
}
.pe-edit .pe-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 28px 0 20px;
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
}
.pe-edit .pe-advanced-toggle::before, .pe-edit .pe-advanced-toggle::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: #e6edf3;
}
.pe-edit .pe-advanced-toggle .pe-adv-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  padding: 7px 16px;
  border: 1px solid #dbe5f1;
  border-radius: 30px;
  background: #fff;
  color: #348fe2;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(20, 60, 110, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pe-edit .pe-advanced-toggle:hover .pe-adv-pill {
  border-color: #348fe2;
  box-shadow: 0 3px 10px rgba(52, 143, 226, 0.18);
}
.pe-edit .pe-advanced-toggle .pe-adv-arw {
  font-size: 12px;
  transition: transform 0.25s;
}
.pe-edit .pe-advanced-toggle.is-open .pe-adv-arw {
  transform: rotate(180deg);
}
.pe-edit .adv-zone {
  display: none;
  width: 100%;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.pe-edit .adv-zone.open {
  display: grid;
}
@media (max-width: 991px) {
  .pe-edit .adv-zone {
    grid-template-columns: 1fr;
  }
}

.pe-edit .note-editable {
  height: auto !important;
  min-height: 160px;
  max-height: 460px;
  overflow-y: auto;
}
.pe-edit .note-toolbar {
  padding: 6px !important;
  background: #fbfdff;
}
.pe-edit .note-toolbar .note-btn {
  height: 28px !important;
  padding: 3px 8px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  border-color: #e3eaf3 !important;
  color: #5a6b7b;
  background: #fff;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pe-edit .note-toolbar .note-btn:hover {
  background: rgba(52, 143, 226, 0.09);
  border-color: #348fe2;
  color: #348fe2;
}
.pe-edit .note-toolbar .note-btn-group {
  margin: 0 5px 5px 0;
}
.pe-edit .note-toolbar .note-icon-caret {
  margin-inline-start: 2px;
}
.pe-edit .activity-log #limited_log {
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding-inline-end: 6px;
}
.pe-edit .activity-log #limited_log > li {
  margin-bottom: 0;
}

.pe-edit--floatsave {
  padding-bottom: 96px;
}
.pe-edit--narrow {
  max-width: 900px;
  margin-inline: auto;
}
.pe-edit > .container:not(:has(.pe-grid)) {
  max-width: 900px;
}
.pe-edit .pe-card + .pe-card {
  margin-top: 18px;
}
.pe-edit > .container .collapse-checkbox {
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px !important;
}
.pe-edit > .container .collapse-checkbox .control-label {
  width: auto;
  flex: 0 1 auto;
  text-align: start !important;
}
.pe-edit > .container .collapse-checkbox > div {
  width: auto;
  flex: 0 0 auto;
}
.pe-edit .pe-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.pe-edit .pe-actionbar .pe-actionbar-title {
  font-size: 16px;
  font-weight: 700;
  color: #2d353c;
}
.pe-edit .pe-actionbar .pe-actionbar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pe-edit .pe-actionbar .pe-actionbar-tools #translations-menu {
  margin: 0;
}
.pe-edit .pe-actionbar .pe-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pe-edit .pe-actionbar .pe-status .pe-status-label {
  font-size: 13px;
  font-weight: 500;
  color: #939393;
}
.pe-edit .pe-actionbar .pe-status .form-check.form-switch {
  margin: 0;
}
.pe-edit .pe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 991px) {
  .pe-edit .pe-grid {
    grid-template-columns: 1fr;
  }
}
.pe-edit .pe-col-main,
.pe-edit .pe-col-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.pe-edit .pe-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6edf3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.pe-edit .pe-card .pe-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 0;
  font-size: 15px;
  font-weight: 700;
  color: #2d353c;
}
.pe-edit .pe-card .pe-card-head .pe-card-ic {
  color: #348fe2;
  font-size: 15px;
}
.pe-edit .pe-card .pe-card-body {
  padding: 16px 18px 18px;
}
.pe-edit .pe-card .pe-card-body .pe-card-hint {
  margin: -2px 0 12px;
  font-size: 11.5px;
  color: #939393;
}
.pe-edit .pe-card .pe-card-body .input-group {
  position: relative;
}
.pe-edit .pe-card .pe-card-body .input-group .lang-label {
  position: absolute;
  inset-inline-end: 8px;
  top: -9px;
  z-index: 2;
  margin: 0;
  padding: 1px 8px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.6;
  color: #348fe2;
  background: #eef2f7;
  border: 1px solid #e0e6ee;
  border-radius: 10px;
}
.pe-edit .pe-col-side .main-img-dropzone .img-box {
  margin-bottom: 10px;
}
.pe-edit .pe-col-side .main-img-dropzone #UpdateTopicImage.dropzone,
.pe-edit .pe-col-side .main-img-dropzone .img-box .dropzone {
  min-height: 140px;
  padding: 10px;
  overflow: hidden;
}
.pe-edit .pe-col-side .main-img-dropzone .dz-preview .dz-image,
.pe-edit .pe-col-side .main-img-dropzone .dz-preview .dz-image img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}
.pe-edit .pe-col-side .main-img-dropzone:has(#previewsContainer img) .dz-message,
.pe-edit .pe-col-side .main-img-dropzone:has(.dz-preview .dz-image img) .dz-message {
  display: none !important;
}
.pe-edit .card-header:has(> .card-title a[href^="#collapse_tag"]) {
  display: none !important;
}
.pe-edit .pe-col-side .dropzone {
  min-height: 120px !important;
  background: #f8fafc;
  background-image: none;
  border: 1px dashed #cdd7e2;
}
.pe-edit .pe-col-side .dropzone .dz-message,
.pe-edit .pe-col-side .dropzone .dz-default.dz-message {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background-image: none !important;
  text-align: center;
  padding: 18px 12px;
}
.pe-edit .pe-col-side .dropzone .dz-message,
.pe-edit .pe-col-side .dropzone .dz-message span {
  display: block;
  color: #2d353c;
  font-weight: 600;
  font-size: 13px;
  opacity: 1;
}
.pe-edit .pe-col-side .img-panel {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0 0 8px;
}
.pe-edit .pe-col-side .img-panel .card-header {
  padding: 0 0 8px;
  background: transparent;
  border: 0;
}
.pe-edit .pe-col-side .img-panel .card-header .card-title {
  font-size: 12.5px;
}
.pe-edit .pe-col-side .img-panel .card-header .card-title a {
  color: #939393;
  font-weight: 600;
}
.pe-edit .pe-col-side .img-panel .card-body {
  padding: 0;
}
.pe-edit .pe-card-options .pe-card-body {
  padding-bottom: 22px;
}
.pe-edit .pe-card-options .po-addopt {
  margin-bottom: 6px;
}
.pe-edit .discount-clear {
  margin-top: 10px;
  color: #939393;
  background: #f4f6f9;
  border: 1px solid #e6edf3;
  border-radius: 6px;
  font-size: 12px;
}
.pe-edit .discount-clear:hover {
  color: #d62828;
  border-color: #f1c2c2;
  background: #fdf1f1;
}
.pe-edit .pe-col-side .collapse-checkbox {
  align-items: center;
  justify-content: space-between;
}
.pe-edit .pe-col-side .collapse-checkbox .control-label {
  width: auto;
  flex: 0 1 auto;
  text-align: start !important;
  padding: 0;
  margin: 0;
}
.pe-edit .pe-col-side .collapse-checkbox > div {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
}
.pe-edit .pe-card .card-header {
  padding: 0 0 10px;
  border: 0;
  background: transparent;
}
.pe-edit .pe-card .card-header .card-title {
  margin: 0;
  width: 100%;
}
.pe-edit .pe-card .card-header .card-title a {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  line-height: 1.5;
  color: #348fe2;
  font-weight: 700;
}
.pe-edit .pe-card .card-header .card-title a label {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  color: #939393;
  cursor: inherit;
}
.pe-edit .pe-card .card-header .card-title a .float-end {
  position: absolute;
  inset-inline-end: 0;
  top: 3px;
}
.pe-edit .pe-savebar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  gap: 10px;
  margin-top: 24px;
  padding: 18px 0 2px;
  border-top: 1px solid #e6edf3;
}
.pe-edit .pe-savebar--float {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1010;
  width: auto;
  max-width: calc(100% - 32px);
  justify-content: center;
  margin: 0;
  padding: 12px 90px;
  border-top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid #e6edf3;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(17, 38, 67, 0.18);
}
.pe-edit .pe-savebar--float .btn {
  margin: 0;
}
@media (max-width: 575px) {
  .pe-edit .pe-savebar--float {
    padding: 12px 40px;
  }
}
.pe-edit .pe-card-options {
  margin-bottom: 16px;
}
.pe-edit .activity-log {
  margin-top: 16px;
}
.pe-edit .activity-log .card.panel-inverse {
  position: relative;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.pe-edit .activity-log .card.panel-inverse > .card-header {
  background: #fff !important;
  color: #2d353c !important;
  border-bottom: 1px solid #eef2f6;
  padding: 16px 18px;
}
.pe-edit .activity-log .card.panel-inverse > .card-header .card-title {
  color: #2d353c !important;
  font-weight: 700;
  font-size: 15px;
}
.pe-edit .activity-log .card.panel-inverse > .card-body {
  padding: 16px 18px 18px;
}
.pe-edit .activity-log #limited_log .d-flex.align-items-center {
  flex-wrap: wrap;
  gap: 2px 10px;
}
.pe-edit .activity-log #limited_log .user-box {
  min-width: 0;
}
.pe-edit .activity-log #limited_log h5 {
  font-size: 13px;
}
@media (max-width: 991px) {
  .pe-edit .activity-log #limited_log .d-flex.align-items-center {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
  }
  .pe-edit .activity-log #limited_log .log-time {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  .pe-edit .activity-log #limited_log .user-box.width-250 {
    width: auto !important;
  }
  .pe-edit .activity-log #limited_log .width-200 {
    width: auto !important;
    font-size: 11.5px;
  }
  .pe-edit .activity-log .log-content {
    overflow-x: auto;
  }
}
.pe-edit .pe-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  padding: 14px;
  background: #fcfdff;
  margin: 0 0 14px;
}
@media (max-width: 700px) {
  .pe-edit .pe-pair {
    grid-template-columns: 1fr;
  }
}
.pe-edit .pe-pair.pe-pair--stack {
  grid-template-columns: 1fr;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  gap: 14px;
}
.pe-edit .pe-pair.pe-pair--duo {
  grid-template-columns: 1fr 1fr;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  gap: 16px;
}
@media (max-width: 700px) {
  .pe-edit .pe-pair.pe-pair--duo {
    grid-template-columns: 1fr;
  }
}
.pe-edit .pe-cat-full {
  margin-bottom: 16px;
}
.pe-edit .pe-pair-cell {
  min-width: 0;
}
.pe-edit .pe-pair-cell .card,
.pe-edit .pe-pair-cell .panel-group,
.pe-edit .pe-pair-cell .card-header,
.pe-edit .pe-pair-cell .panel-collapse,
.pe-edit .pe-pair-cell .panel-collapse > .card-body,
.pe-edit .pe-pair-cell .categories-panel,
.pe-edit .pe-pair-cell .col-md-12 {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pe-edit .pe-pair-cell .control-label,
.pe-edit .pe-pair-cell .card-title,
.pe-edit .pe-pair-cell .card-title a {
  display: block;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #2d353c !important;
  line-height: 1.4 !important;
}
.pe-edit .pe-pair-cell .form-group {
  margin: 0 !important;
}
.pe-edit .pe-pair-cell .form-group + .form-group {
  margin-top: 10px !important;
}
.pe-edit .pe-pair-cell .card-title a > label {
  display: none !important;
}
.pe-edit .pe-subsection {
  border: 1px solid #e6edf3;
  border-radius: 8px;
  padding: 14px;
  margin: 0 0 14px;
  background: #fcfdff;
}
.pe-edit .panel-collapse,
.pe-edit .panel-collapse.collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
}
.pe-edit .accordion-toggle {
  pointer-events: none;
  cursor: default;
}
.pe-edit .activity-log .accordion-toggle {
  pointer-events: auto;
  cursor: pointer;
}
.pe-edit .fa-chevron-down {
  display: none !important;
}
.pe-edit .pe-card-options .po-save-row {
  padding: 6px 0 10px;
}
.pe-edit .pe-card-options .po-save-prices {
  margin-bottom: 34px;
}
.pe-edit .multiFiles {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 12px;
}
.pe-edit .multiFiles > [class*=col-] {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}
.pe-edit .multiFiles .ImagePreviewBox {
  position: relative;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border-radius: 6px;
}
.pe-edit .multiFiles .ImagePreviewBox img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 6px;
}
.pe-edit .pe-amtbox {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  background: #fafcff;
  padding: 4px;
}
.pe-edit .pe-amtbox:focus-within {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.12);
}
.pe-edit .pe-amtbox > input {
  border: 0;
  background: transparent;
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.pe-edit .pe-amtbox .pe-unit-select {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background-color: #348fe2;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  padding: 0 30px 0 14px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 2px rgba(42, 120, 194, 0.35);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 12px center;
  transition: background-color 0.15s;
}
.pe-edit .pe-amtbox .pe-unit-select:hover {
  background-color: #2a78c2;
}
.pe-edit .pe-amtbox .pe-unit-select:focus-visible {
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.35);
}
.pe-edit .pe-discount .pe-discount-sub {
  font-size: 11.5px;
  color: #939393;
  margin: 0 0 14px;
}
.pe-edit .pe-discount .control-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #939393;
}
.pe-edit .pe-discount .pe-seg {
  display: flex;
  gap: 6px;
  background: #eef2f7;
  border: 1px solid #e3e9f1;
  border-radius: 9px;
  padding: 4px;
}
.pe-edit .pe-discount .pe-seg .pe-seg-btn {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 8px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #939393;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
}
.pe-edit .pe-discount .pe-seg .pe-seg-btn.on {
  background: #fff;
  color: #348fe2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.pe-edit .pe-discount .pe-daterow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.pe-edit .pe-discount .pe-datefield {
  position: relative;
}
.pe-edit .pe-discount .pe-datefield .form-control {
  padding-inline-start: 30px;
}
.pe-edit .pe-discount .pe-datefield .pe-cal {
  position: absolute;
  inset-inline-start: 10px;
  top: 31px;
  color: #939393;
  font-size: 12px;
  pointer-events: none;
}
.pe-edit .pe-discount .pe-discount-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff7ee 0%, #ffefdd 100%);
  border: 1px solid #fbdfbe;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(157, 92, 18, 0.06);
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(247, 151, 55, 0.16);
  color: #F79737;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-ico i, .pe-edit .pe-discount .pe-discount-preview .pe-dp-ico svg {
  font-size: 15px;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-ico svg {
  width: 1em;
  height: 1em;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #a06a2c;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-new {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  color: #e07b1f;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-new i {
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  opacity: 0.8;
  margin-inline-start: 2px;
}
.pe-edit .pe-discount .pe-discount-preview .pe-old {
  font-size: 12px;
  color: #b9a892;
  text-decoration: line-through;
}
.pe-edit .pe-discount .pe-discount-preview:has(.pe-dp-rows) {
  align-items: flex-start;
}
.pe-edit .pe-discount .pe-discount-preview:has(.pe-dp-rows) .pe-dp-body {
  flex: 1 1 auto;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-rows {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-row + .pe-dp-row {
  border-top: 1px solid rgba(160, 106, 44, 0.12);
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-row .pe-dp-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: #8a6a45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-row .pe-dp-new {
  font-size: 16px;
}
.pe-edit .pe-discount .pe-discount-preview .pe-dp-row .pe-old {
  flex: 0 0 auto;
}
.pe-edit .pe-discount .discount-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 16px 0 22px;
  padding: 9px 12px;
}

/* ===== segmented control (pe-seg) — choice options like up-sell offer placement ===== */
.pe-seg-field .pe-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #f1f3f7;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
}
.pe-seg-field .pe-seg__opt {
  margin: 0;
  cursor: pointer;
}
.pe-seg-field .pe-seg__opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pe-seg-field .pe-seg__opt span {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  transition: all 0.2s ease;
}
.pe-seg-field .pe-seg__opt input:checked + span {
  background: #fff;
  color: #348fe2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.pe-seg-field .pe-seg__opt input:focus-visible + span {
  outline: 2px solid #348fe2;
  outline-offset: 1px;
}

.pe-edit.feature-show .fs-topbar {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e6edf3;
}
.pe-edit.feature-show .fs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  color: #348fe2;
  background: rgba(52, 143, 226, 0.1);
  border-radius: 9px;
  padding: 11px 22px;
  transition: background 0.15s;
}
.pe-edit.feature-show .fs-back i {
  font-size: 13px;
}
.pe-edit.feature-show .fs-back:hover {
  background: rgba(52, 143, 226, 0.18);
  color: #348fe2;
}
.pe-edit.feature-show .fa-chevron-down {
  display: inline-block !important;
}
.pe-edit.feature-show .panel-collapse.collapse {
  display: none !important;
}
.pe-edit.feature-show .accordion-toggle {
  pointer-events: auto;
  cursor: pointer;
}
.pe-edit.feature-show .fs-description {
  font-size: 13px;
  color: #939393;
  line-height: 1.7;
  margin: 0 0 12px;
}
.pe-edit.feature-show .fs-wiki {
  font-size: 12.5px;
}
.pe-edit.feature-show .fs-hidden {
  display: none !important;
}
.pe-edit.feature-show .fs-card {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.pe-edit.feature-show .pe-card-head.fs-card-head {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.pe-edit.feature-show .pe-card-head.fs-card-head .fs-card-head__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pe-edit.feature-show .pe-card-head.fs-card-head .pe-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pe-edit.feature-show .pe-card-head.fs-card-head .pe-status .pe-status-label {
  font-size: 13px;
  font-weight: 500;
  color: #939393;
}
.pe-edit.feature-show .pe-card-head.fs-card-head .pe-status .form-check.form-switch {
  margin: 0;
}
.pe-edit.feature-show .fs-divider {
  margin: 14px 0;
  border-color: #e6edf3;
}
.pe-edit.feature-show .pe-card-body .control-label {
  display: block;
  text-align: start !important;
  font-size: 12.5px;
  font-weight: 600;
  color: #2d353c;
  margin-bottom: 5px;
}
.pe-edit.feature-show .pe-card-body .form-control {
  height: 38px;
  border: 1px solid #dbe3ec;
  border-radius: 6px;
  font-size: 12.5px;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pe-edit.feature-show .pe-card-body .form-control:focus {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.12);
}
.pe-edit.feature-show .pe-card-body select.form-control {
  height: 38px;
  appearance: auto;
}
.pe-edit.feature-show .pe-card-body .form-group {
  margin-bottom: 16px;
}
.pe-edit.feature-show .pe-card-body .form-group:last-child {
  margin-bottom: 0;
}
.pe-edit.feature-show .pe-card-body small.text-muted {
  font-size: 11.5px;
}
.pe-edit.feature-show .pe-card-body .help-block {
  font-size: 11.5px;
}
.pe-edit.feature-show .pe-card-body .input-group-btn .btn {
  height: 38px;
}
.pe-edit.feature-show .pe-card-body button[type=submit] {
  margin-bottom: 8px;
}

.pe-edit.website-show .pe-card,
.pe-edit.sales-profile .pe-card {
  margin-top: 18px;
}
.pe-edit.website-show .pe-card:first-of-type,
.pe-edit.sales-profile .pe-card:first-of-type {
  margin-top: 0;
}
.pe-edit.website-show .ws-id,
.pe-edit.sales-profile .ws-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 600;
  color: #939393;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 10px;
}
.pe-edit.website-show .ws-id-real,
.pe-edit.sales-profile .ws-id-real {
  font-size: 11px;
  font-weight: 700;
  color: #348fe2;
  background: rgba(52, 143, 226, 0.12);
  border-radius: 5px;
  padding: 1px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-edit.website-show .ws-stats .ws-stat-grid,
.pe-edit.sales-profile .ws-stats .ws-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.pe-edit.website-show .ws-stat,
.pe-edit.sales-profile .ws-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  background: #fbfdff;
}
.pe-edit.website-show .ws-stat .ws-stat-num,
.pe-edit.sales-profile .ws-stat .ws-stat-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #2d353c;
}
.pe-edit.website-show .ws-stat .ws-stat-label,
.pe-edit.sales-profile .ws-stat .ws-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #939393;
}
.pe-edit.website-show .ws-qa,
.pe-edit.sales-profile .ws-qa {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pe-edit.website-show .ws-qa-item,
.pe-edit.sales-profile .ws-qa-item {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px 18px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  background: #fbfdff;
}
@media (max-width: 640px) {
  .pe-edit.website-show .ws-qa-item,
  .pe-edit.sales-profile .ws-qa-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.pe-edit.website-show .ws-qa-item .ws-qa-q,
.pe-edit.sales-profile .ws-qa-item .ws-qa-q {
  font-size: 13px;
  font-weight: 700;
  color: #2d353c;
}
.pe-edit.website-show .ws-qa-item .ws-qa-a,
.pe-edit.sales-profile .ws-qa-item .ws-qa-a {
  font-size: 13px;
  font-weight: 600;
  color: #348fe2;
  background: rgba(52, 143, 226, 0.1);
  border-radius: 7px;
  padding: 5px 12px;
  justify-self: start;
}
.pe-edit.website-show .ws-layout,
.pe-edit.sales-profile .ws-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
}
@media (max-width: 820px) {
  .pe-edit.website-show .ws-layout,
  .pe-edit.sales-profile .ws-layout {
    grid-template-columns: 1fr;
  }
}
.pe-edit.website-show .ws-defs,
.pe-edit.sales-profile .ws-defs {
  margin: 0;
  display: grid;
  gap: 15px;
  align-content: start;
}
.pe-edit.website-show .ws-def dt,
.pe-edit.sales-profile .ws-def dt {
  font-size: 11.5px;
  font-weight: 700;
  color: #939393;
  margin-bottom: 4px;
}
.pe-edit.website-show .ws-def dd,
.pe-edit.sales-profile .ws-def dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #2d353c;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pe-edit.website-show .ws-chip,
.pe-edit.sales-profile .ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  padding: 4px 11px;
  text-decoration: none;
  transition: filter 0.15s;
}
.pe-edit.website-show .ws-chip:hover,
.pe-edit.sales-profile .ws-chip:hover {
  filter: brightness(0.97);
}
.pe-edit.website-show .ws-chip--info,
.pe-edit.sales-profile .ws-chip--info {
  background: rgba(52, 143, 226, 0.12);
  color: #348fe2;
}
.pe-edit.website-show .ws-chip--domain,
.pe-edit.sales-profile .ws-chip--domain {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}
.pe-edit.website-show .ws-chip i,
.pe-edit.sales-profile .ws-chip i {
  font-size: 11px;
}
.pe-edit.website-show .ws-tel, .pe-edit.website-show .ws-wa,
.pe-edit.sales-profile .ws-tel,
.pe-edit.sales-profile .ws-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 13px;
  text-decoration: none;
}
.pe-edit.website-show .ws-tel,
.pe-edit.sales-profile .ws-tel {
  color: #348fe2;
  background: rgba(52, 143, 226, 0.1);
}
.pe-edit.website-show .ws-wa,
.pe-edit.sales-profile .ws-wa {
  color: #25d366;
  background: rgba(37, 211, 102, 0.12);
}
.pe-edit.website-show .ws-side,
.pe-edit.sales-profile .ws-side {
  display: flex;
  flex-direction: column;
  padding-inline-start: 22px;
  border-inline-start: 1px solid #eef2f6;
}
@media (max-width: 820px) {
  .pe-edit.website-show .ws-side,
  .pe-edit.sales-profile .ws-side {
    padding-inline-start: 0;
    border-inline-start: 0;
    border-top: 1px solid #eef2f6;
    padding-top: 18px;
  }
}
.pe-edit.website-show .ws-meta,
.pe-edit.sales-profile .ws-meta {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 8px;
}
.pe-edit.website-show .ws-meta .badge, .pe-edit.website-show .ws-meta .label,
.pe-edit.sales-profile .ws-meta .badge,
.pe-edit.sales-profile .ws-meta .label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  padding: 5px 11px;
  border-radius: 7px;
  text-decoration: none;
}
.pe-edit.website-show .ws-meta .badge i, .pe-edit.website-show .ws-meta .label i,
.pe-edit.sales-profile .ws-meta .badge i,
.pe-edit.sales-profile .ws-meta .label i {
  font-size: 10.5px;
  opacity: 0.9;
}
.pe-edit.website-show .ws-meta .ws-meta-status,
.pe-edit.sales-profile .ws-meta .ws-meta-status {
  font-size: 12px;
  padding: 6px 13px;
}
.pe-edit.website-show .ws-controls-block,
.pe-edit.sales-profile .ws-controls-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eef2f6;
}
.pe-edit.website-show .ws-controls-title,
.pe-edit.sales-profile .ws-controls-title {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #939393;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.pe-edit.website-show .ws-controls-title i,
.pe-edit.sales-profile .ws-controls-title i {
  font-size: 14px;
  color: #348fe2;
}
.pe-edit.website-show .ws-controls,
.pe-edit.sales-profile .ws-controls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pe-edit.website-show .ws-controls li,
.pe-edit.sales-profile .ws-controls li {
  margin: 0;
  display: flex;
}
.pe-edit.website-show .ws-controls a, .pe-edit.website-show .ws-controls button,
.pe-edit.sales-profile .ws-controls a,
.pe-edit.sales-profile .ws-controls button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: #f4f7fb;
  color: #2d353c;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.pe-edit.website-show .ws-controls a i, .pe-edit.website-show .ws-controls button i,
.pe-edit.sales-profile .ws-controls a i,
.pe-edit.sales-profile .ws-controls button i {
  font-size: 12.5px;
  color: #348fe2;
  transition: color 0.15s;
}
.pe-edit.website-show .ws-controls a:hover, .pe-edit.website-show .ws-controls button:hover,
.pe-edit.sales-profile .ws-controls a:hover,
.pe-edit.sales-profile .ws-controls button:hover {
  background: rgba(52, 143, 226, 0.1);
  border-color: rgba(52, 143, 226, 0.28);
  color: #348fe2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 143, 226, 0.12);
}
.pe-edit.website-show .ws-controls button.items-delete,
.pe-edit.sales-profile .ws-controls button.items-delete {
  background: rgba(239, 68, 68, 0.07);
  color: #ef4444;
}
.pe-edit.website-show .ws-controls button.items-delete i,
.pe-edit.sales-profile .ws-controls button.items-delete i {
  color: #ef4444;
}
.pe-edit.website-show .ws-controls button.items-delete:hover,
.pe-edit.sales-profile .ws-controls button.items-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.32);
  color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
}
.pe-edit.website-show .ws-sales .pe-card-head .ws-add,
.pe-edit.sales-profile .ws-sales .pe-card-head .ws-add {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #348fe2;
  border-radius: 8px;
  padding: 6px 14px;
  transition: filter 0.15s;
}
.pe-edit.website-show .ws-sales .pe-card-head .ws-add:hover,
.pe-edit.sales-profile .ws-sales .pe-card-head .ws-add:hover {
  filter: brightness(0.94);
  color: #fff;
}
.pe-edit.website-show .ws-sales .pe-card-head .ws-add i,
.pe-edit.sales-profile .ws-sales .pe-card-head .ws-add i {
  font-size: 11px;
}
.pe-edit.website-show .ws-timeline,
.pe-edit.sales-profile .ws-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pe-edit.website-show .ws-tl-item,
.pe-edit.sales-profile .ws-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
}
.pe-edit.website-show .ws-tl-item:last-child,
.pe-edit.sales-profile .ws-tl-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.pe-edit.website-show .ws-tl-item:first-child,
.pe-edit.sales-profile .ws-tl-item:first-child {
  padding-top: 4px;
}
.pe-edit.website-show .ws-tl-icon,
.pe-edit.sales-profile .ws-tl-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 143, 226, 0.1);
  color: #348fe2;
  font-size: 14px;
}
.pe-edit.website-show .ws-tl-body,
.pe-edit.sales-profile .ws-tl-body {
  flex: 1 1 auto;
  min-width: 0;
}
.pe-edit.website-show .ws-tl-meta,
.pe-edit.sales-profile .ws-tl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.pe-edit.website-show .ws-tl-meta strong,
.pe-edit.sales-profile .ws-tl-meta strong {
  font-size: 13.5px;
  color: #2d353c;
}
.pe-edit.website-show .ws-tl-meta .ws-tl-status,
.pe-edit.sales-profile .ws-tl-meta .ws-tl-status {
  font-size: 11px;
  font-weight: 600;
  color: #348fe2;
  background: rgba(52, 143, 226, 0.1);
  border-radius: 6px;
  padding: 2px 8px;
}
.pe-edit.website-show .ws-tl-meta .ws-tl-time,
.pe-edit.sales-profile .ws-tl-meta .ws-tl-time {
  font-size: 11.5px;
  color: #939393;
}
.pe-edit.website-show .ws-tl-desc,
.pe-edit.sales-profile .ws-tl-desc {
  margin: 5px 0 0;
  font-size: 13px;
  color: rgb(71.2285714286, 83.8914285714, 94.9714285714);
  line-height: 1.6;
}
.pe-edit.website-show .ws-tl-chips,
.pe-edit.sales-profile .ws-tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.pe-edit.website-show .ws-tl-del,
.pe-edit.sales-profile .ws-tl-del {
  flex: 0 0 auto;
  margin: 0;
}
.pe-edit.website-show .ws-tl-del button,
.pe-edit.sales-profile .ws-tl-del button {
  border: 0;
  background: transparent;
  color: #cbd5e1;
  font-size: 13px;
  padding: 4px 6px;
  cursor: pointer;
  transition: color 0.15s;
}
.pe-edit.website-show .ws-tl-del button:hover,
.pe-edit.sales-profile .ws-tl-del button:hover {
  color: #ef4444;
}
.pe-edit.website-show .ws-features .website-settings .row.form-group,
.pe-edit.sales-profile .ws-features .website-settings .row.form-group {
  align-items: center;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #f4f7fa;
}
.pe-edit.website-show .ws-features .website-settings .row.form-group:last-child,
.pe-edit.sales-profile .ws-features .website-settings .row.form-group:last-child {
  border-bottom: 0;
}
.pe-edit.website-show .ws-features .website-settings .control-label,
.pe-edit.sales-profile .ws-features .website-settings .control-label {
  margin: 0;
  font-weight: 600;
}

.pe-edit.website-sale-edit .pe-actionbar-title .ws-id {
  margin-inline-start: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #939393;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 10px;
}
.pe-edit.website-sale-edit .ws-sale-card {
  max-width: 620px;
  margin: 0 auto;
}
.pe-edit.website-sale-edit .form-group {
  margin-bottom: 18px;
}
.pe-edit.website-sale-edit .form-group .control-label {
  display: block;
  text-align: start !important;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #2d353c;
}
.pe-edit.website-sale-edit .form-select {
  height: 44px;
  border-color: #e6edf3;
  border-radius: 8px;
  background-position: left 14px center;
  padding-inline-start: 14px;
  padding-inline-end: 38px;
}
.pe-edit.website-sale-edit .select2-container {
  width: 100% !important;
}
.pe-edit.website-sale-edit .select2-container--default .select2-selection--multiple {
  min-height: 44px !important;
  border: 1px solid #e6edf3 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.pe-edit.website-sale-edit .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 0 !important;
  min-height: auto !important;
}
.pe-edit.website-sale-edit .select2-container--default .select2-selection--multiple .select2-selection__choice {
  height: auto !important;
  margin: 0 !important;
  padding: 3px 10px !important;
  background: rgba(52, 143, 226, 0.1) !important;
  border: 1px solid rgba(52, 143, 226, 0.22) !important;
  border-radius: 6px !important;
  color: #348fe2 !important;
  font-size: 12px;
  font-weight: 600;
}
.pe-edit.website-sale-edit .select2-container--default .select2-selection--multiple .select2-selection__choice span {
  padding: 0 4px;
  font-size: 12px;
}
.pe-edit.website-sale-edit .select2-container--default .select2-selection--multiple .select2-search__field {
  min-height: auto !important;
  margin-top: 0 !important;
}
.pe-edit.website-sale-edit .ws-save-row {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.pe-edit.website-sale-edit .ws-save-row .btn {
  min-width: 220px;
  font-weight: 600;
  padding: 10px 28px;
}
.pe-edit.website-sale-edit .help-block {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.ws-control-menu--labeled > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #348fe2;
  color: #fff;
  border-radius: 8px;
  padding: 8px 15px;
  font-weight: 600;
  font-size: 13px;
  border: 0;
  transition: filter 0.15s, transform 0.15s;
}
.ws-control-menu--labeled > .dropdown-toggle:hover {
  filter: brightness(0.94);
  color: #fff;
  transform: translateY(-1px);
}
.ws-control-menu--labeled > .dropdown-toggle .caret {
  margin: 0;
}

.ws-cm-menu.dropdown-menu {
  min-width: 236px;
  padding: 8px !important;
  border: 1px solid #e6edf3;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(17, 38, 67, 0.12);
}
.ws-cm-menu.dropdown-menu > li {
  margin: 0;
}
.ws-cm-menu.dropdown-menu > li a, .ws-cm-menu.dropdown-menu > li button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #2d353c;
  font-size: 12.5px;
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.ws-cm-menu.dropdown-menu > li a > i:first-child, .ws-cm-menu.dropdown-menu > li button > i:first-child {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #eef2f7;
  color: #939393;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}
.ws-cm-menu.dropdown-menu > li a:hover, .ws-cm-menu.dropdown-menu > li button:hover {
  background: #eaf4fd;
  color: #348fe2;
}
.ws-cm-menu.dropdown-menu > li a:hover > i:first-child, .ws-cm-menu.dropdown-menu > li button:hover > i:first-child {
  background: rgba(52, 143, 226, 0.16);
  color: #348fe2;
}
.ws-cm-menu.dropdown-menu > li button.items-delete:hover {
  background: #fdecec;
  color: #e23b3b;
}
.ws-cm-menu.dropdown-menu > li button.items-delete:hover > i:first-child {
  background: rgba(226, 59, 59, 0.14);
  color: #e23b3b;
}

.pe-edit.pe-website .ws-username-field {
  display: flex;
  align-items: stretch;
}
.pe-edit.pe-website .ws-username-field .app-domain,
.pe-edit.pe-website .ws-username-field .schema-prefix {
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: rgba(52, 143, 226, 0.1);
  color: #348fe2;
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
  border: 1px solid #e6edf3;
}
.pe-edit.pe-website .ws-username-field .form-control {
  text-align: center;
  border-radius: 0;
  border-inline: 0;
}
.pe-edit.pe-website .ws-username-field > :first-child {
  border-start-start-radius: 8px;
  border-end-start-radius: 8px;
}
.pe-edit.pe-website .ws-username-field > :last-child {
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
}
.pe-edit.pe-website .pe-col-side .form-group {
  margin-bottom: 10px;
}
.pe-edit.pe-website .pe-col-side .form-group:last-child {
  margin-bottom: 0;
}
.pe-edit.pe-website .pe-save-row {
  display: flex;
  justify-content: center;
  margin-top: 22px;
  margin-bottom: 28px;
}
.pe-edit.pe-website .pe-save-row .btn {
  min-width: 240px;
  font-weight: 600;
  padding: 11px 28px;
}

.wie-iconfield {
  display: flex;
  align-items: stretch;
}
.wie-iconfield .wie-iconfield__ico {
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f7fb;
  border: 1px solid #dbe3ec;
  border-inline-end: 0;
  border-start-start-radius: 6px;
  border-end-start-radius: 6px;
  color: #7891aa;
  font-size: 14px;
}
.wie-iconfield .form-control {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.wie-iconfield .w-100 {
  flex: 1 1 auto;
  min-width: 0;
}
.wie-iconfield .iti {
  flex: 1 1 auto;
  min-width: 0;
}
.wie-iconfield .iti input.form-control {
  border-radius: 6px 0 0 6px;
}
.wie-iconfield .iti .iti__selected-flag {
  padding-inline-start: 10px;
}
.wie-iconfield .form-control-feedback {
  display: none;
}
.wie-iconfield .wie-ico--fb {
  color: #1877f2;
}
.wie-iconfield .wie-ico--tw {
  color: #1da1f2;
}
.wie-iconfield .wie-ico--ig {
  color: #e1306c;
}
.wie-iconfield .wie-ico--wa {
  color: #25d366;
}
.wie-iconfield .wie-ico--tg {
  color: #0088cc;
}
.wie-iconfield .wie-ico--tt {
  color: #111;
}
.wie-iconfield .wie-ico--yt {
  color: #ff0000;
}
.wie-iconfield .wie-ico--sc {
  color: #f7b500;
}
.wie-iconfield .wie-ico--so {
  color: #ff5500;
}
.wie-iconfield .wie-ico--an {
  color: #3ddc84;
}
.wie-iconfield .wie-ico--ap {
  color: #555;
}

.wie-uploads {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}
.wie-uploads .wie-field--grow {
  flex: 1 1 auto;
  min-width: 0;
}
.wie-uploads .wie-field__label {
  display: block;
  text-align: start;
  font-size: 12.5px;
  font-weight: 600;
  color: #2d353c;
  margin-bottom: 5px;
}
.wie-uploads .wie-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  border: 2px dashed #cdd8e3;
  border-radius: 10px;
  background: #f8fbff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wie-uploads .wie-drop:hover {
  border-color: #348fe2;
  background: #f2f8ff;
}
.wie-uploads .wie-drop--logo {
  flex: 0 0 130px;
  width: 130px;
}
.wie-uploads .wie-drop--cover {
  flex: 1 1 auto;
}
.wie-uploads .wie-drop__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.wie-uploads .wie-drop__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(15, 40, 70, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.wie-uploads .wie-drop:hover .wie-drop__hint {
  opacity: 1;
}
.wie-uploads .wie-drop__remove {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.9);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 40, 70, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.wie-uploads .wie-drop__remove:hover {
  background: #dc3545;
  transform: scale(1.08);
}
.wie-uploads .p-image {
  display: none;
}
@media (max-width: 575.98px) {
  .wie-uploads {
    flex-wrap: wrap;
  }
  .wie-uploads .wie-drop--logo {
    flex: 0 0 100%;
    width: 100%;
  }
}

.ws-features {
  margin-top: 18px;
}
.ws-features .pe-card-head {
  margin-bottom: 14px;
}
.ws-features .wf-search {
  position: relative;
  margin-bottom: 16px;
}
.ws-features .wf-search > i {
  position: absolute;
  inset-inline-start: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #939393;
  font-size: 13px;
  pointer-events: none;
}
.ws-features .wf-search .form-control {
  height: 40px;
  padding-inline-start: 36px;
  border: 1px solid #e6edf3;
  border-radius: 8px;
}
.ws-features .wf-group {
  margin-bottom: 20px;
}
.ws-features .wf-group:last-child {
  margin-bottom: 0;
}
.ws-features .wf-group__title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #348fe2;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eef2f6;
}
.ws-features .wf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 20px;
}
@media (max-width: 767px) {
  .ws-features .wf-grid {
    grid-template-columns: 1fr;
  }
}
.ws-features .wf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ws-features .wf-item:hover {
  background: #f6f9fc;
}
.ws-features .wf-item__label {
  font-size: 13px;
  font-weight: 600;
  color: #2d353c;
  line-height: 1.4;
}
.ws-features .wf-item__switch {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  min-height: auto;
  display: inline-flex;
  align-items: center;
}
.ws-features .wf-item__switch .form-check-input {
  margin: 0;
  float: none;
}
.ws-features .wf-hidden {
  display: none !important;
}

.wa-page .wa-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e6edf3;
  background: #fafbfc;
}
.wa-page .wa-title {
  font-size: 16px;
  font-weight: 700;
  color: #2d353c;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-page .wa-icon {
  color: #25d366;
  font-size: 20px;
}
.wa-page .wa-card {
  position: relative;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.wa-page .wa-gate-body {
  padding: 48px 24px;
  text-align: center;
}
.wa-page .wa-gate-body .wa-gate-icon {
  font-size: 64px;
  color: #25d366;
  margin-bottom: 20px;
}
.wa-page .wa-gate-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #2d353c;
  margin-bottom: 12px;
}
.wa-page .wa-gate-body p.text-muted {
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 20px;
}
.wa-page .wa-gate-body .wa-price {
  font-size: 22px;
  font-weight: 700;
  color: #25d366;
  margin-bottom: 4px;
}
.wa-page .wa-gate-body .wa-price-hint {
  font-size: 12px;
  color: #939393;
  margin-bottom: 24px;
}
.wa-page .wa-tabs {
  border-bottom: 1px solid #e6edf3;
  padding: 0 16px;
  background: #fafbfc;
}
.wa-page .wa-tabs .nav-tabs {
  border-bottom: 0;
  gap: 4px;
}
.wa-page .wa-tabs .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #939393;
  background: transparent;
  transition: color 0.15s, border-color 0.15s;
}
.wa-page .wa-tabs .nav-link:hover {
  color: #2d353c;
}
.wa-page .wa-tabs .nav-link.active {
  color: #348fe2;
  border-bottom-color: #348fe2;
}
.wa-page .wa-tabs .nav-link i {
  margin-inline-end: 6px;
}
.wa-page .wa-tab-body {
  padding: 24px;
}
.wa-page .wa-number-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafbfc;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  gap: 12px;
}
.wa-page .wa-number-row:last-child {
  margin-bottom: 0;
}
.wa-page .wa-number-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wa-page .wa-number-info .wa-num-icon {
  font-size: 22px;
}
.wa-page .wa-number-info .wa-num-label {
  font-weight: 700;
  font-size: 13.5px;
  color: #2d353c;
}
.wa-page .wa-number-info .wa-num-status {
  font-size: 12px;
}
.wa-page .wa-number-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.wa-page .wa-qr-wrap {
  margin-top: 24px;
  text-align: center;
}
.wa-page .wa-qr-wrap #wa-qr-image {
  max-width: 260px;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  padding: 8px;
}
.wa-page #wa-qr-section,
.wa-page #wa-qr-ready,
.wa-page #wa-qr-error {
  display: none;
}
.wa-page .wa-template-card {
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.wa-page .wa-template-card:last-child {
  margin-bottom: 0;
}
.wa-page .wa-tpl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9fa;
  padding: 12px 16px;
  border-bottom: 1px solid #e6edf3;
  cursor: pointer;
  user-select: none;
}
.wa-page .wa-tpl-header .wa-tpl-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #2d353c;
}
.wa-page .wa-tpl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #d9f5e3;
  color: #1da851;
  flex-shrink: 0;
}
.wa-page .wa-tpl-body {
  padding: 16px;
}
.wa-page .wa-tpl-chevron {
  font-size: 11px;
  margin-inline-start: 4px;
  transition: transform 0.2s ease;
}
.wa-page .wa-tpl-toggle[aria-expanded=true] .wa-tpl-chevron {
  transform: rotate(180deg);
}
.wa-page .wa-tpl-label {
  display: block;
  font-weight: 600;
  color: #2d353c;
  margin-bottom: 6px;
  font-size: 13px;
}
.wa-page .wa-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.wa-page .wa-chips-hint {
  font-size: 11.5px;
  color: #939393;
  margin-inline-start: 4px;
}
.wa-page textarea.form-control {
  border: 1px solid #dbe3ec;
  border-radius: 6px;
  font-size: 13px;
  resize: vertical;
  min-height: 200px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wa-page textarea.form-control:focus {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.12);
  outline: none;
}
.wa-page .wa-preview-box {
  background: #eef8ee;
  border: 1px solid #c3e6cb;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #3a6b3a;
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.wa-page .wa-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: #eef2f7;
  border: 1px solid #e0e6ee;
  font-size: 11.5px;
  font-weight: 600;
  color: #348fe2;
  cursor: pointer;
  margin: 3px 3px 0 0;
  transition: background 0.1s;
}
.wa-page .wa-chip:hover {
  background: #dde6f5;
}
.wa-page .wa-empty {
  text-align: center;
  padding: 40px 16px;
  color: #939393;
}
.wa-page .wa-empty i {
  font-size: 48px;
  margin-bottom: 12px;
  color: #c5d0db;
}
.wa-page .wa-empty h5 {
  font-size: 15px;
  font-weight: 600;
  color: #2d353c;
  margin-bottom: 6px;
}

.actions-area {
  width: 100%;
  display: flex;
  justify-content: left;
}
@media (max-width: 575.98px) {
  .actions-area {
    justify-content: space-between;
  }
  .actions-area .filtration-collapse-btn {
    margin: 0;
  }
}

.shipping-company .card-box {
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 15px;
}
.shipping-company .card-box .img-box {
  min-width: 100px;
  max-width: 100%;
  height: 175px;
}
.shipping-company .card-box .img-box img {
  object-fit: cover;
}
.shipping-company .card-box a h5 {
  font-weight: bold;
  height: 40px;
  overflow: hidden;
  line-height: 1.5;
}
.shipping-company .card-box a:hover h5 {
  color: #348fe2;
}
.shipping-company .card-box a p {
  min-height: 40px;
  max-height: 40px;
  overflow: hidden;
  line-height: 1.7;
}
.shipping-company .card-box .actions-button {
  display: initial;
}
.shipping-company .card-box .actions-button .checkbox {
  display: initial;
}
.shipping-company .card-box .actions-button .icons-size {
  float: left;
}
.shipping-company .card-box .actions-button .icons-size .btn {
  padding: 0;
}
.shipping-company .card-box .actions-button .icons-size .btn:focus {
  border: none !important;
  box-shadow: none;
}
.shipping-company .card-box .actions-button .icons-size .btn:active {
  border: none !important;
}

.add-shipping-company .select2-selection__clear {
  background-color: #d9e0e7;
  color: red;
  padding: 0.1rem 0.6rem;
  font-size: 0.9375rem;
  margin: 10px;
  border-radius: 0.5rem;
}
.add-shipping-company .selected-cities {
  padding: 10px 15px !important;
  background-color: #eff7ff;
  margin-bottom: 10px;
  border-radius: 0.5rem;
}
.add-shipping-company .selected-cities .select2-container .select2-selection--multiple {
  min-height: 40px;
  padding: 0 7px;
}
.add-shipping-company .selected-cities .option-delete {
  font-size: 11px;
  height: auto;
}
.add-shipping-company .selected-cities .option-delete svg, .add-shipping-company .selected-cities .option-delete i {
  font-size: 11px;
}
.add-shipping-company .btn-new-value {
  background-color: #d9e0e7;
  color: #526271;
}

.create_order {
  font-size: 14px;
}
.create_order .select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
  left: 5px !important;
  right: inherit !important;
}
.create_order .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #424242 transparent transparent transparent;
  border-style: solid;
  border-width: 7px 6px 0 6px;
  height: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
}
.create_order select {
  background-color: white;
  /* inline SVG */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23424242%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
  background-position: left 10px center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  border-radius: 5px;
  padding: 10px 30px 10px 10px;
  border: 1px solid #e2e7eb;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.create_order select::-ms-expand {
  display: none;
}
.create_order .order_label {
  font-size: 13px;
  margin-bottom: 10px;
  font-weight: bold;
}
.create_order #bank-info,
.create_order #digital-wallet-info {
  margin: 30px;
  margin-top: 15px;
  background: #f9f9f9;
  border: 1px solid #f3f3f3;
  border-radius: 5px;
  padding: 20px;
}
.create_order #bank-info .bank-account-form,
.create_order #bank-info .digital-wallet-info,
.create_order #digital-wallet-info .bank-account-form,
.create_order #digital-wallet-info .digital-wallet-info {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
.create_order #bank-info .bank-account-form .field,
.create_order #bank-info .digital-wallet-info .field,
.create_order #digital-wallet-info .bank-account-form .field,
.create_order #digital-wallet-info .digital-wallet-info .field {
  margin-top: 15px;
}
.create_order .payment_confirmation_image {
  background: #f9f9f9;
  border: 1px dashed #f3f3f3;
  border-radius: 5px;
  padding: 20px;
  margin: 0 30px;
}
.create_order .payment_confirmation_image > div {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

.card-orders {
  background-color: transparent;
}
.card-orders .header {
  padding: 0;
}
.card-orders .header h1.page-title {
  margin: 0;
  gap: 5px !important;
  white-space: nowrap;
}
.card-orders .header .actions-area {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-orders .header .actions-area button, .card-orders .header .actions-area a {
  height: 40px;
  margin: 0;
  border: 1px solid #d0d5dd;
  padding: 0 10px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #566276;
  gap: 5px;
  font-weight: 600;
}
.card-orders .header .actions-area button i, .card-orders .header .actions-area button svg, .card-orders .header .actions-area a i, .card-orders .header .actions-area a svg {
  font-size: 13px;
  margin: 0;
}
.card-orders .header .actions-area button:hover, .card-orders .header .actions-area button:focus, .card-orders .header .actions-area a:hover, .card-orders .header .actions-area a:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
}
.card-orders .header .actions-area button:active, .card-orders .header .actions-area a:active {
  transform: scale(0.95);
}
.card-orders .header .actions-area .btn-create-order {
  background-color: #348fe2;
  border-color: #348fe2;
  color: #fff;
}
.card-orders .header .actions-area button.text-white, .card-orders .header .actions-area a.text-white {
  color: #566276 !important;
}
.card-orders .card {
  border: 1px solid #e6edf3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.card-orders .card-body {
  background-color: #fff;
  padding: 20px;
  box-shadow: none;
  border-radius: 10px;
}
.card-orders .card-body table thead:first-child > tr:first-child > th {
  color: #45505b;
  font-size: 15px;
  font-weight: bold;
}
.card-orders .card-body table thead tr {
  border: 1px solid #e8ecf0;
}
.card-orders .card-body table thead tr th {
  background-color: #f8f9fa;
}
.card-orders .card-body table tbody tr {
  transform: initial;
}
.card-orders .card-body table tbody tr > td {
  font-size: 14px;
}
.card-orders .card-body table tbody tr > td.order-date div {
  display: flex;
  justify-content: center;
  gap: 5px;
  width: max-content;
}
.card-orders .card-body table tbody tr > td span.label {
  margin: auto !important;
  width: max-content;
  min-width: 85px;
  font-weight: 700;
}
.card-orders .card-body table tbody .orderId, .card-orders .card-body table tbody .customer-phone {
  display: flex;
  align-items: center;
  gap: 5px;
}
.card-orders .card-body table tbody .orderId a, .card-orders .card-body table tbody .customer-phone a {
  margin-bottom: 0;
  font-size: 14px;
}
.card-orders .card-body table tbody .orderId .copyMainBtn, .card-orders .card-body table tbody .customer-phone .copyMainBtn {
  opacity: 0;
  min-width: 15px;
}
.card-orders .card-body table tbody .orderId .phone-number, .card-orders .card-body table tbody .customer-phone .phone-number {
  font-size: 17px !important;
  font-family: "Courier New", monospace;
  font-weight: 700;
  color: #65717d;
  letter-spacing: 0;
  direction: ltr;
}
.card-orders .card-body table tbody .orderId:hover .copyMainBtn, .card-orders .card-body table tbody .customer-phone:hover .copyMainBtn {
  opacity: 1;
}
.card-orders .card-body table tbody #settings-dropdown .dropdown-btn {
  font-size: 16px;
  padding: 5px 12px;
}
.card-orders tbody tr {
  position: relative;
}
.card-orders tbody tr td {
  position: relative;
}
.card-orders .shipping-status {
  position: relative;
  display: inline-block;
}
.card-orders .shipping-status .status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 7px;
  padding: 0.2rem;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  z-index: 2;
  min-width: 100px;
  justify-content: space-between;
}
.card-orders .shipping-status .status-label .company-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.card-orders .shipping-status .status-label .company-info .company-logo {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-orders .shipping-status .status-label .company-info .company-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.card-orders .shipping-status .status-label .company-info .status-name {
  width: max-content;
  font-weight: 600;
  font-size: 12px;
}
.card-orders .shipping-status .status-label .indicator-container {
  justify-content: center;
  border-right: 1px solid #d4d9de;
}
.card-orders .shipping-status .status-label .indicator-container .status-indicator {
  width: 10px;
  height: 10px;
}
.card-orders .shipping-status .status-label.waiting_for_generate_policy {
  background: #f9fafb;
  color: #687283;
  border: 1px solid #e2e5ea;
}
.card-orders .shipping-status .status-label.waiting_for_pickup {
  background: #eef2ff;
  color: #6366f1;
  border-color: #a5b4fc;
}
.card-orders .shipping-status .status-label.waiting_for_generate_pickup {
  background: #f3e8ff;
  color: #7e22ce;
  border-color: #c084fc;
}
.card-orders .shipping-status .status-label.picked_up, .card-orders .shipping-status .status-label.out_for_delivery {
  background: #fff4e6;
  color: #f97316;
  border-color: #fdba74;
}
.card-orders .shipping-status .status-label.completed {
  background: #ecfdf5;
  color: #10b981;
  border-color: #6ee7b7;
}
.card-orders .shipping-status .status-label.failed, .card-orders .shipping-status .status-label.cancelled, .card-orders .shipping-status .status-label.on_return {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fca5a5;
}
.card-orders .shipping-status .status-label.on_return {
  background-color: #f2f4f7;
  border-color: #e4e7ec;
  color: #111619;
}
.card-orders .shipping-status .status-label.exception {
  background: #fdf2f8;
  color: #ec4899;
  border-color: #f9a8d4;
}
.card-orders .status-popup {
  position: absolute;
  left: 0;
  width: 230px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 0.75rem 0.9rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
  margin-top: 0;
}
.card-orders .status-popup .popup-header {
  margin-bottom: 7px;
}
.card-orders .status-popup .popup-header p {
  font-size: 0.8rem;
  color: #4a5568;
  margin: 0 0 5px 0;
  text-align: start;
}
.card-orders .status-popup .popup-header .popup-company {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-orders .status-popup .popup-header .popup-company .popup-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  color: white;
  overflow: hidden;
}
.card-orders .status-popup .popup-header .popup-company .popup-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.card-orders .status-popup .popup-header .popup-company h3 {
  font-weight: 700;
  margin: 0;
  font-size: 15px;
}
.card-orders .shipping-status:hover .status-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 1000;
}
.card-orders .status-popup:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.card-orders .status-section {
  margin-bottom: 0.65rem;
  text-align: start;
}
.card-orders .status-section .section-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  color: #596477;
}
.card-orders .status-section .status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 500;
}
.card-orders .status-badge.delivered {
  background: rgba(16, 185, 129, 0.1);
  color: #33b585;
}
.card-orders .status-badge.in-transit {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
.card-orders .status-badge.failed {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.card-orders .status-badge.pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.card-orders .status-badge.processing {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}
.card-orders .status-badge.out-for-delivery {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}
.card-orders .tracking-info {
  background: #f8fafc;
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0;
  position: relative;
}
.card-orders .tracking-info .tracking-number {
  font-size: 14px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: 1px;
  font-family: "Courier New", monospace;
  direction: ltr;
  text-align: start;
  padding: 0;
  border-radius: 7px;
}
.card-orders .tracking-info .copy-btn {
  background: none;
  border: none;
  color: #4a5568;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s;
  position: relative;
  height: initial;
  margin: 0;
  overflow: initial;
}
.card-orders .tracking-info .copy-btn:hover {
  background: #e2e8f0;
  color: #2d3748;
}
.card-orders .copy-success {
  position: absolute;
  bottom: 17px;
  right: -20px;
  background: #33b585;
  color: white;
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  display: inline-flex;
  width: max-content;
  height: 20px;
  gap: 5px;
}
.card-orders .copy-success.show {
  opacity: 1;
}
.card-orders .track-btn {
  width: 100%;
  color: rgb(71, 82, 100);
  display: flex;
  -moz-box-align: center;
  align-items: center;
  -moz-box-pack: center;
  justify-content: center;
  height: 34px;
  position: relative;
  z-index: 2;
  gap: 8px;
  padding: 0 15px;
  background-color: transparent;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.3s;
  text-decoration: none;
  margin: 0px;
  border: 1px solid rgb(198, 205, 217);
}
.card-orders .track-btn:hover {
  transform: translateY(-2px);
  box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 6px -1px;
  background-color: rgb(52, 143, 226);
  color: rgb(255, 255, 255);
  border-color: rgb(52, 143, 226);
  outline: initial;
  outline-offset: initial;
}
.card-orders .actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #4a5568;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.2s;
}
.card-orders .actions a:hover {
  background: #f8fafc;
  color: #2d3748;
}
.card-orders .footer {
  text-align: center;
  padding: 1.5rem;
  color: #4a5568;
  font-size: 0.9rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card-orders {
  /* تتبع حالة الشحن */
}
.card-orders .tracking-progress {
  margin: 1rem 0;
  padding: 0.5rem 0;
}
.card-orders .tracking-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 0 1rem;
}
.card-orders .tracking-steps::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  height: 2px;
  background: #e2e8f0;
  z-index: 1;
}
.card-orders .tracking-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}
.card-orders .step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
}
.card-orders .step-label {
  font-size: 0.7rem;
  color: #4a5568;
  text-align: center;
  max-width: 80px;
}
.card-orders .step-active .step-icon {
  background: var(--primary-gradient);
  border-color: transparent;
  color: white;
}
.card-orders .step-completed .step-icon {
  background: #33b585;
  border-color: transparent;
  color: white;
}
.card-orders .step-active .step-label,
.card-orders .step-completed .step-label {
  color: #2d3748;
  font-weight: 500;
}
.card-orders {
  /* تصميم متجاوب */
}
@media (max-width: 768px) {
  .card-orders .header {
    flex-direction: column;
    align-items: stretch;
  }
  .card-orders .search-box {
    max-width: 100%;
  }
  .card-orders .table-container {
    overflow-x: auto;
  }
  .card-orders table {
    min-width: 600px;
  }
  .card-orders .status-popup {
    width: 300px;
    left: -60px;
  }
  .card-orders .status-label {
    min-width: 160px;
  }
}
.card-orders {
  /* تعديلات جديدة */
}
.card-orders .status-popup.top {
  bottom: 94%;
  top: auto;
}
.card-orders .status-popup.bottom {
  top: 94%;
  bottom: auto;
}
.card-orders .indicator-container {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
  font-weight: bold;
  padding: 0 5px;
}
.card-orders .indicator-container span {
  display: flex;
}
.card-orders .indicator-container .status-indicator {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #ddd;
}
.card-orders .indicator-container .status-indicator.delivered {
  background: #33b585;
}
.card-orders .indicator-container .status-indicator.failed {
  background: #ef4444;
}
.card-orders .indicator-container .status-indicator.pending {
  background: #f59e0b;
}
.card-orders .shipping-overview {
  width: 100%;
  position: relative;
  margin: 15px 0;
}
.card-orders .shipping-overview .header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 15px;
}
.card-orders .shipping-overview .header-container .overview-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #4361ee;
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
}
.card-orders .shipping-overview .header-container .overview-title i {
  font-size: 1rem;
  background: linear-gradient(135deg, #4361ee, #6c63ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-orders .shipping-overview .header-container .total-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fa;
  color: #495057;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #e9ecef;
}
.card-orders .shipping-overview .header-container .total-summary .total-text {
  font-size: 1.2rem;
  font-weight: 600;
}
.card-orders .shipping-overview .header-container .total-summary .total-count {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #4361ee;
}
.card-orders .shipping-overview .shipping-filters {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 0;
}
.card-orders .shipping-overview .shipping-filters .filter-card {
  background: white;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
}
.card-orders .shipping-overview .shipping-filters .filter-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 3px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-orders .shipping-overview .shipping-filters .filter-card:hover, .card-orders .shipping-overview .shipping-filters .filter-card:active, .card-orders .shipping-overview .shipping-filters .filter-card:active, .card-orders .shipping-overview .shipping-filters .filter-card.active {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
}
.card-orders .shipping-overview .shipping-filters .filter-card:hover::before, .card-orders .shipping-overview .shipping-filters .filter-card:active::before, .card-orders .shipping-overview .shipping-filters .filter-card:active::before, .card-orders .shipping-overview .shipping-filters .filter-card.active::before {
  opacity: 1;
}
.card-orders .shipping-overview .shipping-filters .filter-card:hover .status-count, .card-orders .shipping-overview .shipping-filters .filter-card:active .status-count, .card-orders .shipping-overview .shipping-filters .filter-card:active .status-count, .card-orders .shipping-overview .shipping-filters .filter-card.active .status-count {
  transform: scale(1.1);
}
.card-orders .shipping-overview .shipping-filters .filter-card .filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  gap: 6px;
}
.card-orders .shipping-overview .shipping-filters .filter-card .filter-header .status-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-orders .shipping-overview .shipping-filters .filter-card .filter-header .status-info .status-icon {
  width: 35px;
  height: 35px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.card-orders .shipping-overview .shipping-filters .filter-card .filter-header .status-info .status-text {
  font-weight: 600;
  font-size: 1rem;
  color: #2d3748;
}
.card-orders .shipping-overview .shipping-filters .filter-card .filter-header .status-count {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a202c;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-orders .shipping-overview .shipping-filters .filter-card.awaiting::before {
  background: linear-gradient(135deg, #ff9800, #ff5722);
}
.card-orders .shipping-overview .shipping-filters .filter-card.awaiting .status-icon {
  background: linear-gradient(135deg, #ff9800, #ff5722);
}
.card-orders .shipping-overview .shipping-filters .filter-card.processing::before {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
}
.card-orders .shipping-overview .shipping-filters .filter-card.processing .status-icon {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
}
.card-orders .shipping-overview .shipping-filters .filter-card.in-transit::before {
  background: linear-gradient(135deg, #43cea2, #f9f871);
}
.card-orders .shipping-overview .shipping-filters .filter-card.in-transit .status-icon {
  background: linear-gradient(135deg, #43cea2, #f9f871);
  color: #333;
}
.card-orders .shipping-overview .shipping-filters .filter-card.action-required::before {
  background: linear-gradient(135deg, #f44336, #d32f2f);
}
.card-orders .shipping-overview .shipping-filters .filter-card.action-required .status-icon {
  background: linear-gradient(135deg, #f44336, #d32f2f);
}
.card-orders .shipping-overview .shipping-filters .filter-card.Waiting-payment::before {
  background: linear-gradient(135deg, #2196f3, #1976d2);
}
.card-orders .shipping-overview .shipping-filters .filter-card.Waiting-payment .status-icon {
  background: linear-gradient(135deg, #2196f3, #1976d2);
}
.card-orders .shipping-overview .shipping-filters .filter-card.failed::before {
  background: linear-gradient(135deg, #e91e63, #c2185b);
}
.card-orders .shipping-overview .shipping-filters .filter-card.failed .status-icon {
  background: linear-gradient(135deg, #e91e63, #c2185b);
}
.card-orders .shipping-overview .shipping-filters .filter-card.delivered::before {
  background: linear-gradient(135deg, #4caf50, #388e3c);
}
.card-orders .shipping-overview .shipping-filters .filter-card.delivered .status-icon {
  background: linear-gradient(135deg, #4caf50, #388e3c);
}
.card-orders .shipping-overview .shipping-filters .filter-card.cancelled::before {
  background: linear-gradient(135deg, #ff4d4d, #990000);
}
.card-orders .shipping-overview .shipping-filters .filter-card.cancelled .status-icon {
  background: linear-gradient(135deg, #ff4d4d, #990000);
}
.card-orders .filter-card {
  animation: fadeIn 0.5s ease-out forwards;
  opacity: 0;
  /*transform: translateY(15px);*/
}
.card-orders .filter-card:nth-child(1) {
  animation-delay: 0.1s;
}
.card-orders .filter-card:nth-child(2) {
  animation-delay: 0.2s;
}
.card-orders .filter-card:nth-child(3) {
  animation-delay: 0.3s;
}
.card-orders .filter-card:nth-child(4) {
  animation-delay: 0.4s;
}
.card-orders .filter-card:nth-child(5) {
  animation-delay: 0.5s;
}
.card-orders .filter-card:nth-child(6) {
  animation-delay: 0.6s;
}
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 992px) {
  .card-orders .shipping-filters {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-orders .header-container {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 768px) {
  .card-orders .shipping-overview {
    padding: 10px;
  }
  .card-orders .overview-title {
    font-size: 1.3rem;
  }
  .card-orders .status-count {
    font-size: 1rem;
  }
}
@media (max-width: 576px) {
  .card-orders .shipping-overview {
    overflow: hidden;
    padding: 0;
  }
  .card-orders .shipping-overview .shipping-filters {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .card-orders .shipping-overview .shipping-filters::-webkit-scrollbar {
    height: 6px;
  }
  .card-orders .shipping-overview .shipping-filters::-webkit-scrollbar-track {
    background: transparent;
  }
  .card-orders .shipping-overview .shipping-filters::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }
  .card-orders .shipping-overview .shipping-filters .filter-card {
    min-width: 135px;
    flex: 0 0 auto;
    padding: 5px 10px;
  }
  .card-orders .shipping-overview .shipping-filters .filter-card .filter-header .status-count {
    font-size: 0.95rem;
  }
  .card-orders .shipping-overview .shipping-filters .filter-card .filter-header .status-info {
    gap: 4px;
  }
  .card-orders .shipping-overview .shipping-filters .filter-card .filter-header .status-info .status-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: 0.75rem;
  }
  .card-orders .shipping-overview .shipping-filters .filter-card .filter-header .status-info .status-text {
    font-size: 0.85rem;
  }
  .card-orders .status-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
  .card-orders .overview-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 576px) {
  div#content .card-orders .header {
    flex-direction: initial;
    margin-bottom: 15px;
    padding: 0;
  }
  div#content .card-orders .header .page-title {
    margin-bottom: 10px;
  }
  div#content .card-orders .header .actions-area {
    width: initial;
  }
  div#content .card-orders .header .actions-area a {
    width: 40px;
  }
  div#content .card-orders .header .actions-area a i, div#content .card-orders .header .actions-area a svg {
    font-size: 16px;
  }
  div#content .card-orders .header .actions-area a span {
    display: none;
  }
  div#content .card-orders .card-body {
    padding: 10px;
  }
  div#content .card-orders .card-body .table thead:first-child > tr:first-child > th {
    font-size: 13px;
  }
  div#content .card-orders .card-body .table tbody td {
    min-width: 120px;
  }
  div#content .card-orders .card-body .table tbody td:nth-last-of-type {
    min-width: 60px;
  }
  div#content .card-orders .card-body .table tbody .orderId .copyMainBtn,
  div#content .card-orders .card-body .table tbody .customer-phone .copyMainBtn {
    opacity: 1;
  }
}
@media (max-width: 576px) {
  div#content .card .breadcrumb {
    display: none;
  }
  div#content .card .stats-container {
    gap: 10px;
    margin-bottom: 15px;
    display: none;
    grid-template-columns: repeat(2, 1fr);
  }
}

.container-box {
  max-width: 1200px;
  margin: 0 auto;
}

.selectall-checkbox {
  width: 18px;
  height: 18px;
}

.selection-actions {
  background-color: #ffffff;
  padding: 0 0 10px;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.2s ease, transform 0.3s ease;
  display: none;
  position: relative;
  width: 100%;
  z-index: 5;
}
.selection-actions .selection-container {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 15px;
  flex-wrap: nowrap;
}
.selection-actions .selection-container .selection-info {
  font-size: 15px;
  color: #2c3e50;
  background: transparent;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.selection-actions .selection-container .selection-info .deselect-btn {
  background: transparent;
  border: 1px solid #e74c3c;
  color: #c83e31;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}
.selection-actions .selection-container .selection-info .deselect-btn:hover {
  background-color: #e74c3c;
  color: white;
}
.selection-actions .selection-container .selection-info .count {
  animation: countPop 0.3s ease;
}
.selection-actions .selection-container #settings-dropdown .dropdown-menu a {
  gap: 5px;
  justify-content: space-between;
}
.selection-actions .selection-container #settings-dropdown .dropdown-menu a div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.selection-actions .selection-container #settings-dropdown .dropdown-menu a span.badge {
  display: flex;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 5px 9px;
  background-color: #d5e8ff;
  color: #1e293b;
}
.selection-actions .selection-container #settings-dropdown .dropdown-menu a span.badge.new-badge {
  background-color: #ef4141;
  color: #fff;
}
.selection-actions.show {
  opacity: 1;
  transform: translateY(0);
  display: block;
  animation: smoothSlide 0.4s ease-out;
}

@keyframes smoothSlide {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes countPop {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.print-btn {
  background: linear-gradient(135deg, #36b9cc 0%, #1cc88a 100%);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 140px;
}

.print-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(28, 200, 138, 0.2);
}

.table th {
  background-color: #f8f9fc;
  color: #5a5c69;
  font-weight: 600;
  border-bottom: 2px solid #e3e6f0;
  padding: 15px;
  font-size: 14px;
}
.table td {
  padding: 15px;
  vertical-align: middle;
  border-color: #e3e6f0;
  font-size: 14px;
}
.table tbody tr.selected {
  background-color: #f0f7ff;
  animation: rowSelect 0.3s ease;
}
.table tbody .checkboxAll {
  width: 18px;
  height: 18px;
  cursor: pointer;
  border-radius: 4px;
}
.table tbody .checkboxAll:checked {
  background-color: #4e73df;
  border-color: #4e73df;
}

@keyframes rowSelect {
  0% {
    background-color: white;
  }
  100% {
    background-color: #f0f7ff;
  }
}
@media (max-width: 768px) {
  .selection-actions .d-flex {
    flex-wrap: wrap;
    gap: 10px;
  }
  .selection-actions .d-flex > * {
    flex: 1;
    min-width: 140px;
  }
}
.order-item-note p {
  font-size: 12px;
  color: #515151;
}

.order-data .form-group {
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
}
.order-data .form-group .d-flex {
  border-bottom: none;
}
.order-data .form-group b {
  display: flex;
  align-items: center;
  color: #707070;
  font-weight: normal;
}

.order-show .card-body {
  padding-top: 0;
}
.order-show .card-header {
  padding: 0;
  background-color: transparent;
  color: #0d71bb;
}
.order-show .card-header h4 {
  height: initial;
  font-size: 16px;
}

.show-order-dashboard .card {
  margin-bottom: 20px;
  border: none;
}
.show-order-dashboard .container .row {
  margin-left: -10px;
  margin-right: -10px;
}
@media (min-width: 1400px) {
  .show-order-dashboard .container {
    max-width: 1460px;
  }
}
@media (max-width: 480px) {
  .show-order-dashboard .container {
    padding: 0 10px;
  }
}
.show-order-dashboard .order-styled-stack {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.show-order-dashboard .order-styled-stack .d-flex-container {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.show-order-dashboard .order-styled-stack .d-flex-container .assigned-employee {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
.show-order-dashboard .order-styled-stack .d-flex-container .assigned-employee button {
  margin: 0 3px;
  border: 1px solid #d0d5dd;
  padding: 0 10px;
  height: 40px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #566276;
  gap: 5px;
}
.show-order-dashboard .order-styled-stack .d-flex-container .assigned-employee button span {
  padding: 0;
  height: initial;
  font-size: 12px;
}
.show-order-dashboard .order-styled-stack .d-flex-container .assigned-employee .employee {
  width: 35px;
  height: 35px;
  margin-left: -10px;
  border: 1px solid #fff;
  background-color: #fff;
  padding: 0;
  border-radius: 50%;
}
.show-order-dashboard .order-styled-stack .d-flex-container .assigned-employee .employee img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.show-order-dashboard .order-styled-stack .d-flex-container .assigned-employee div:first-of-type {
  margin: initial;
}
.show-order-dashboard .card {
  border-radius: 10px;
}
.show-order-dashboard .card .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  border-bottom: 1px solid #e4ebf0;
  padding-bottom: 10px;
}
.show-order-dashboard .card .panel-head .card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  font-size: 1.1rem;
  color: #566276;
  height: initial;
  margin-bottom: 0;
  min-height: initial;
}
.show-order-dashboard .card .card-body {
  padding: 25px;
}
.show-order-dashboard .order-status-data .status-data-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.show-order-dashboard .order-status-data .status-data-container .form-group {
  margin-bottom: 10px;
}
.show-order-dashboard .order-status-data .status-data-container .order-site-status div, .show-order-dashboard .order-status-data .status-data-container .order-site-status button,
.show-order-dashboard .order-status-data .status-data-container .order-payment-status div,
.show-order-dashboard .order-status-data .status-data-container .order-payment-status button,
.show-order-dashboard .order-status-data .status-data-container .order-shipping-status div,
.show-order-dashboard .order-status-data .status-data-container .order-shipping-status button,
.show-order-dashboard .order-status-data .status-data-container .order-number div,
.show-order-dashboard .order-status-data .status-data-container .order-number button {
  padding: 0 10px;
  height: 25px;
  border-radius: 5px;
  background-color: #F9FAFB;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #c0bfbf;
}
.show-order-dashboard .order-status-data .status-data-container .order-site-status div img, .show-order-dashboard .order-status-data .status-data-container .order-site-status button img,
.show-order-dashboard .order-status-data .status-data-container .order-payment-status div img,
.show-order-dashboard .order-status-data .status-data-container .order-payment-status button img,
.show-order-dashboard .order-status-data .status-data-container .order-shipping-status div img,
.show-order-dashboard .order-status-data .status-data-container .order-shipping-status button img,
.show-order-dashboard .order-status-data .status-data-container .order-number div img,
.show-order-dashboard .order-status-data .status-data-container .order-number button img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.show-order-dashboard .order-status-data .status-data-container .order-site-status div span, .show-order-dashboard .order-status-data .status-data-container .order-site-status button span,
.show-order-dashboard .order-status-data .status-data-container .order-payment-status div span,
.show-order-dashboard .order-status-data .status-data-container .order-payment-status button span,
.show-order-dashboard .order-status-data .status-data-container .order-shipping-status div span,
.show-order-dashboard .order-status-data .status-data-container .order-shipping-status button span,
.show-order-dashboard .order-status-data .status-data-container .order-number div span,
.show-order-dashboard .order-status-data .status-data-container .order-number button span {
  padding: 0;
  height: initial;
  font-size: 12px;
}
.show-order-dashboard .ajax-data-edits .card-body .panel-head, .show-order-dashboard .ajax-data-edits .card-body .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
  padding-bottom: 5px;
}
.show-order-dashboard .ajax-data-edits .card-body .panel-head h4, .show-order-dashboard .ajax-data-edits .card-body .card-head h4 {
  font-weight: bold;
  font-size: 15px;
  color: #333;
  margin: 0;
}
.show-order-dashboard .ajax-data-edits .card-body .panel-head a, .show-order-dashboard .ajax-data-edits .card-body .panel-head button, .show-order-dashboard .ajax-data-edits .card-body .card-head a, .show-order-dashboard .ajax-data-edits .card-body .card-head button {
  background: transparent;
  border: none;
  color: #2B70AE;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: 1s ease-in;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.show-order-dashboard .ajax-data-edits .card-body .panel-head a:hover, .show-order-dashboard .ajax-data-edits .card-body .panel-head button:hover, .show-order-dashboard .ajax-data-edits .card-body .card-head a:hover, .show-order-dashboard .ajax-data-edits .card-body .card-head button:hover {
  background-color: #E6F0FF;
}
.show-order-dashboard .ajax-data-edits .card-body .customer-info {
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #ececec;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.show-order-dashboard .ajax-data-edits .card-body .customer-info .img-box {
  width: 40px;
  height: 40px;
  background-color: #000;
  border-radius: 50%;
  flex-shrink: 0;
}
.show-order-dashboard .ajax-data-edits .card-body .customer-info .info-container {
  width: 100%;
}
.show-order-dashboard .ajax-data-edits .card-body div {
  font-size: 14px;
}
.show-order-dashboard .ajax-data-edits .card-body div h5 {
  font-size: 15px;
  color: #307dc3;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.show-order-dashboard .ajax-data-edits .card-body div h6 {
  font-size: 13px;
  font-weight: 600;
  color: #475467;
}
.show-order-dashboard .ajax-data-edits .card-body div .icon-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 10px;
}
.show-order-dashboard .ajax-data-edits .card-body div i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}
.show-order-dashboard .ajax-data-edits .card-body div a {
  font-size: 15px;
  font-weight: bold;
}
.show-order-dashboard .ajax-data-edits .card-body div p {
  color: #475467;
  font-size: 14px;
  margin-bottom: 5px;
}
.show-order-dashboard .ajax-data-edits .card-body div p a {
  font-size: 14px;
}
.show-order-dashboard .ajax-data-edits .card-body .d-flex-align {
  gap: 7px;
}
.show-order-dashboard .ajax-data-edits .card-body .whatsapp-btn {
  background-color: #075e54;
  color: #fff;
  transition: background-color 0.3s ease;
  padding: 0;
}
.show-order-dashboard .ajax-data-edits .card-body .whatsapp-btn:hover {
  background-color: #25d366;
  color: #fff;
}
.show-order-dashboard .ajax-data-edits .card-body .copyMainBtn {
  background-color: #e2f3ff;
}
.show-order-dashboard .order-inner-list .order-items .order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.show-order-dashboard .order-inner-list .order-items .order-item .img-box {
  width: 80px;
  height: 80px;
  border-radius: 7px;
  border: 1px solid #eee;
  display: block;
  flex-shrink: 0;
}
.show-order-dashboard .order-inner-list .order-items .order-item .img-box img {
  width: 100%;
  height: 100%;
}
.show-order-dashboard .cancelled, .show-order-dashboard .label-danger, .show-order-dashboard .danger {
  background-color: #fff3eb !important;
  border: 1px solid #d6593d !important;
  color: #ad442c !important;
}
.show-order-dashboard .under-review, .show-order-dashboard .label-warning, .show-order-dashboard .warning {
  background-color: #fffaeb !important;
  border: 1px solid #f79009 !important;
  color: #e17d24 !important;
}
.show-order-dashboard .processing, .show-order-dashboard .label-indigo, .show-order-dashboard .indigo {
  background: #dfcbff !important;
  border: 1px solid #8753de !important;
  color: #42286b;
}
.show-order-dashboard .lime {
  background-color: #fffbeb !important;
  border: 1px solid #f59e0b !important;
  color: #92400e !important;
}
.show-order-dashboard .pending, .show-order-dashboard .primary {
  background: #e5f3ff !important;
  border: 1px solid #348fe2 !important;
  color: #477096;
}
.show-order-dashboard .completed, .show-order-dashboard .label-green, .show-order-dashboard .green, .show-order-dashboard .success {
  background-color: #cffae1 !important;
  border: 1px solid #98dab2 !important;
  color: #067647 !important;
}
.show-order-dashboard .on-hold, .show-order-dashboard .gray {
  background-color: #c2c8d6 !important;
  border: 1px solid #989faf !important;
  color: #1a212b !important;
}
.show-order-dashboard .order-items-container .order-items-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card {
  width: 100%;
  background: white;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #e2e8f0;
  display: block;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card:hover {
  border-color: #7cade3;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-card-container {
  display: flex;
  align-items: center;
  gap: 20px;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-image-section {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-image-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-image-wrapper:hover {
  border-color: #667eea;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-details-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-details-section h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-details-section h5 a {
  color: #2d3748;
  text-decoration: none;
  transition: color 0.3s ease;
  /*line-height: 1.6;*/
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-details-section h5 a:hover {
  color: #2a70ae;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-details-section .item-note {
  color: #718096;
  font-size: 14px;
  margin: 4px 0 0 0;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-details-section .item-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-details-section .item-options .option-item {
  background: #f7fafc;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #4a5568;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-details-section .item-options .option-item .option-image {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-pricing-section {
  flex-shrink: 0;
  min-width: 300px;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-pricing-section .pricing-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: center;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-pricing-section .pricing-row .pricing-item {
  text-align: start;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-pricing-section .pricing-row .pricing-item label {
  display: block;
  font-size: 12px;
  color: #718096;
  margin-bottom: 4px;
  font-weight: 500;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-pricing-section .pricing-row .pricing-item .value-with-action {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-pricing-section .pricing-row .pricing-item .value-with-action .value {
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-pricing-section .pricing-row .total-item .value {
  color: #2a70ae;
  font-weight: bold;
  font-size: 16px;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-pricing-section .pricing-row .discount-value {
  color: #ed8936 !important;
}
.show-order-dashboard .order-items-container .order-items-list .order-item-card .item-pricing-section .pricing-row .item-actions-section {
  flex-shrink: 0;
}
.show-order-dashboard .order-items-container .offer-type-warning {
  border-radius: 8px;
  padding: 15px;
  display: block;
  align-items: center;
  margin-bottom: 0;
  margin-top: 15px;
  position: relative;
  overflow: hidden;
  border: 1px solid #dbe4e9;
  background: #f5fbff;
}
.show-order-dashboard .order-items-container .offer-type-warning .offer-type-details {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.show-order-dashboard .order-items-container .offer-type-warning .offer-type-details div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.show-order-dashboard .order-items-container .offer-type-warning .offer-type-details .offer-type-desc {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #323a47;
}
.show-order-dashboard .order-items-container .offer-type-warning .offer-type-title {
  margin-top: 0;
  display: flex;
  margin-bottom: 5px;
}
.show-order-dashboard .order-items-container .offer-type-warning .offer-type-title .offer-type-badge {
  color: white;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 12px;
  margin-right: 0;
  font-weight: 700;
  background: linear-gradient(135deg, #345879 0%, #e84585 100%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.show-order-dashboard .order-items-container .offer-type-warning .offer-type-link {
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1.43rem;
  cursor: pointer;
  transition: var(--transition);
  color: #475264;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid #D0D5DD;
  height: 36px;
}
.show-order-dashboard .order-items-container .offer-type-warning .offer-type-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
  background-color: #348fe2;
  color: #fff;
  border-color: #348fe2;
  outline: initial;
  outline-offset: initial;
}
.show-order-dashboard .order-items-container .order-item-control-buttons, .show-order-dashboard .payment-section .order-item-control-buttons {
  margin-top: 0;
  display: flex;
  justify-content: start;
  direction: ltr;
}
.show-order-dashboard .order-items-container .order-item-control-buttons .btn-action, .show-order-dashboard .payment-section .order-item-control-buttons .btn-action {
  background: none;
  border: 1px solid #c6cdd9;
  height: 25px; /*width: 32px;*/
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 0 10px;
  gap: 3px;
  margin: 0 3px;
  color: #475264;
}
.show-order-dashboard .order-items-container .order-item-control-buttons .btn-action span, .show-order-dashboard .payment-section .order-item-control-buttons .btn-action span {
  height: initial;
  width: initial;
  padding: 0;
  font-size: 12px;
}
.show-order-dashboard .order-items-container .order-item-control-buttons .btn-action i, .show-order-dashboard .order-items-container .order-item-control-buttons .btn-action svg, .show-order-dashboard .payment-section .order-item-control-buttons .btn-action i, .show-order-dashboard .payment-section .order-item-control-buttons .btn-action svg {
  font-size: 10px;
}
.show-order-dashboard .order-items-container .order-item-control-buttons .btn-action.btn-edit:hover, .show-order-dashboard .payment-section .order-item-control-buttons .btn-action.btn-edit:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.1);
}
.show-order-dashboard .order-items-container .order-item-control-buttons .btn-action.btn-discount:hover, .show-order-dashboard .payment-section .order-item-control-buttons .btn-action.btn-discount:hover {
  color: #ed8936;
  background: rgba(237, 137, 54, 0.1);
  border-color: rgba(237, 137, 54, 0.1);
}
.show-order-dashboard .order-items-container .order-item-control-buttons .btn-action.btn-delete.disabled, .show-order-dashboard .payment-section .order-item-control-buttons .btn-action.btn-delete.disabled {
  cursor: no-drop;
  opacity: 0.4;
}
.show-order-dashboard .order-items-container .order-item-control-buttons .btn-action.btn-delete.disabled:hover, .show-order-dashboard .payment-section .order-item-control-buttons .btn-action.btn-delete.disabled:hover {
  color: #475264;
  background: transparent;
  border-color: #c6cdd9;
}
.show-order-dashboard .order-items-container .order-item-control-buttons .btn-action.btn-delete:hover, .show-order-dashboard .payment-section .order-item-control-buttons .btn-action.btn-delete:hover {
  color: #e53e3e;
  background: rgba(229, 62, 62, 0.1);
  border-color: rgba(229, 62, 62, 0.1);
}
.show-order-dashboard .order-items-container .item-remove-discount-section, .show-order-dashboard .payment-section .item-remove-discount-section {
  background-color: #F9FAFB;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  border-radius: 10px;
}
.show-order-dashboard .order-items-container .item-remove-discount-section p, .show-order-dashboard .payment-section .item-remove-discount-section p {
  margin: 5px 0;
  font-weight: 600;
  font-size: 12px;
  color: #58606e;
}
.show-order-dashboard .order-items-container .item-remove-discount-section .buttons-container, .show-order-dashboard .payment-section .item-remove-discount-section .buttons-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.show-order-dashboard .order-items-container .item-remove-discount-section .buttons-container button, .show-order-dashboard .payment-section .item-remove-discount-section .buttons-container button {
  background-color: transparent;
  height: initial;
  padding: initial;
  color: #C24E46;
  border-radius: initial;
  border: none;
}
.show-order-dashboard .order-items-container .item-remove-discount-section .buttons-container button span, .show-order-dashboard .payment-section .item-remove-discount-section .buttons-container button span {
  height: initial;
  padding: initial;
  font-size: 12px;
  font-weight: bold;
}
.show-order-dashboard .order-items-container .item-remove-discount-section .buttons-container button.btn-action, .show-order-dashboard .payment-section .item-remove-discount-section .buttons-container button.btn-action {
  color: #333;
}
.show-order-dashboard {
  /* Custom Modal Styles */
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content,
.show-order-dashboard .custom-modal .modal-dialog .modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-header .modal-title,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-header .modal-title,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-header .modal-title,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-header .modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-header .btn-close,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-header .btn-close,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-header .btn-close,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-header .btn-close {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-header .btn-close:hover,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-header .btn-close:hover,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-header .btn-close:hover,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-header .btn-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body {
  padding: 10px 0;
  /* Form Controls */
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .form-group,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .form-group,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .form-group,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .form-group {
  margin-bottom: 10px;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .form-group label,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .form-group label,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .form-group label,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 8px;
  text-align: start;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .form-group .form-control-modern,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .form-group .form-control-modern,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .form-group .form-control-modern,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .form-group .form-control-modern {
  width: 100%;
  padding: 0;
  border: none;
  border-radius: initial;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
  display: flex;
  align-items: center;
  height: initial;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .form-group .form-control-modern:focus,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .form-group .form-control-modern:focus,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .form-group .form-control-modern:focus,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .form-group .form-control-modern:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .input-with-controls,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .input-with-controls,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .input-with-controls,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .input-with-controls {
  display: flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern {
  border: none;
  border-radius: 0;
  text-align: center;
  flex: 1;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .quantity-btn,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .quantity-btn,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .quantity-btn,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .quantity-btn {
  background: #e4f4ff;
  border: none;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.3s ease;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .quantity-btn:hover,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .quantity-btn:hover,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .quantity-btn:hover,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .quantity-btn:hover {
  background: #667eea;
  color: white;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body {
  /* Discount Type Tabs */
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount-type-tabs,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount-type-tabs {
  margin-bottom: 0;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons {
  display: flex;
  background: #eff9ff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 16px;
  margin-bottom: 0;
  border-radius: 6px;
  font-size: 14px;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 35px;
  font-weight: bold;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn.active, .show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn:hover,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn.active,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn:hover,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn.active,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn:hover,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn.active,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-buttons .tab-btn:hover {
  background: white;
  color: rgb(73, 132, 185);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content {
  padding: 0 15px;
  margin-bottom: 15px;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content .tab-pane,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content .tab-pane,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content .tab-pane,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content .tab-pane {
  display: none;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content .tab-pane.active,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content .tab-pane.active,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content .tab-pane.active,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount-type-tabs .tab-content .tab-pane.active {
  display: block;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .input-with-suffix,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .input-with-suffix,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .input-with-suffix,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .input-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border: 1px solid #e2e8f0;
  height: 45px;
  border-radius: 10px;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .input-with-suffix .input-suffix,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .input-with-suffix .input-suffix,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .input-with-suffix .input-suffix,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .input-with-suffix .input-suffix {
  background: transparent;
  border: none;
  padding: 0;
  height: initial;
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  border-radius: initial;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount_reason,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount_reason,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount_reason,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount_reason {
  padding: 0 15px;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount_reason textarea,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount_reason textarea,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount_reason textarea,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount_reason textarea {
  width: 100%;
  height: 80px;
  border-radius: 10px;
  color: #333;
  border: 1px solid #ddd;
  box-shadow: none;
  padding: 10px 15px;
  font-weight: 500;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount_reason textarea::placeholder,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount_reason textarea::placeholder,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount_reason textarea::placeholder,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount_reason textarea::placeholder {
  color: #c4c4c4;
  font-style: italic;
  font-size: 12px;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .discount_reason textarea:focus,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .discount_reason textarea:focus,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .discount_reason textarea:focus,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .discount_reason textarea:focus {
  border-color: #348fe2;
  outline: none;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .modal-footer,
.show-order-dashboard .assignedEmployzeModal .modal-dialog .modal-content .modal-body .modal-footer,
.show-order-dashboard .discountOrderProductModal .modal-dialog .modal-content .modal-body .modal-footer,
.show-order-dashboard .custom-modal .modal-dialog .modal-content .modal-body .modal-footer {
  padding: 16px 24px;
  border: none;
  background: #f8fafc;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern, .show-order-dashboard .assignedEmployeeModal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern {
  height: 40px;
}
.show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern:focus, .show-order-dashboard .quantityOrderProductModal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern:active, .show-order-dashboard .assignedEmployeeModal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern:focus, .show-order-dashboard .assignedEmployeeModal .modal-dialog .modal-content .modal-body .input-with-controls .form-control-modern:active {
  border: none !important;
}
.show-order-dashboard #orderTotalModal .form-group {
  padding: 0 15px;
}
.show-order-dashboard #orderTotalModal .alert-warning {
  font-size: 14px;
  font-weight: 500;
  padding: 15px;
  border-radius: 7px;
  margin: 20px 15px 0;
  text-align: start;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
}
.show-order-dashboard .quantityOrderProductModal,
.show-order-dashboard .assignedEmployeeModal,
.show-order-dashboard .discountOrderProductModal {
  /* Buttons */
}
.show-order-dashboard .quantityOrderProductModal .btn,
.show-order-dashboard .assignedEmployeeModal .btn,
.show-order-dashboard .discountOrderProductModal .btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.show-order-dashboard .quantityOrderProductModal .btn-cancel,
.show-order-dashboard .assignedEmployeeModal .btn-cancel,
.show-order-dashboard .discountOrderProductModal .btn-cancel {
  background: #f7fafc;
  color: #4a5568;
  border: 2px solid #e2e8f0;
}
.show-order-dashboard .quantityOrderProductModal .btn-cancel:hover,
.show-order-dashboard .assignedEmployeeModal .btn-cancel:hover,
.show-order-dashboard .discountOrderProductModal .btn-cancel:hover {
  background: #edf2f7;
  border-color: #cbd5e0;
}
.show-order-dashboard .quantityOrderProductModal .btn-confirm,
.show-order-dashboard .assignedEmployeeModal .btn-confirm,
.show-order-dashboard .discountOrderProductModal .btn-confirm {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.show-order-dashboard .quantityOrderProductModal .btn-confirm:hover,
.show-order-dashboard .assignedEmployeeModal .btn-confirm:hover,
.show-order-dashboard .discountOrderProductModal .btn-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.show-order-dashboard .quantityOrderProductModal .btn-confirm.discount-btn,
.show-order-dashboard .assignedEmployeeModal .btn-confirm.discount-btn,
.show-order-dashboard .discountOrderProductModal .btn-confirm.discount-btn {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}
.show-order-dashboard .quantityOrderProductModal .btn-confirm.discount-btn :hover,
.show-order-dashboard .assignedEmployeeModal .btn-confirm.discount-btn :hover,
.show-order-dashboard .discountOrderProductModal .btn-confirm.discount-btn :hover {
  box-shadow: 0 4px 12px rgba(237, 137, 54, 0.3);
}
.show-order-dashboard .quantityOrderProductModal .btn-delete-confirm,
.show-order-dashboard .assignedEmployeeModal .btn-delete-confirm,
.show-order-dashboard .discountOrderProductModal .btn-delete-confirm {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  color: white;
}
.show-order-dashboard .quantityOrderProductModal .btn-delete-confirm:hover,
.show-order-dashboard .assignedEmployeeModal .btn-delete-confirm:hover,
.show-order-dashboard .discountOrderProductModal .btn-delete-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}
.show-order-dashboard .product-wallet-charging {
  width: 100%;
  perspective: 1000px;
  margin-bottom: 20px;
}
.show-order-dashboard .product-wallet-charging .wallet-alert {
  display: block;
  background: linear-gradient(145deg, #fff7e6, #fffed6);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}
.show-order-dashboard .product-wallet-charging .alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ffecb3;
}
.show-order-dashboard .product-wallet-charging .alert-header .header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.show-order-dashboard .product-wallet-charging .alert-header .header-title .wallet-icon {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #FFCB00, #FF6B22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(255, 87, 34, 0.3);
  margin: 0;
}
.show-order-dashboard .product-wallet-charging .alert-header .header-title .wallet-icon i {
  font-size: 20px;
  color: white;
}
.show-order-dashboard .product-wallet-charging .alert-header .header-title .title {
  font-size: 16px;
  color: #FF5722;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin: 0;
}
.show-order-dashboard .product-wallet-charging .message-btn-container {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  gap: 50px;
}
.show-order-dashboard .product-wallet-charging .message-btn-container .message {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #5D4037;
  line-height: 1.3;
  margin: 0;
  padding: 0 10px;
  text-align: center;
}
.show-order-dashboard .product-wallet-charging .message-btn-container .btn {
  background: #0E9384;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  height: 45px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.show-order-dashboard .product-wallet-charging .message-btn-container .btn:hover {
  transform: translateY(-3px);
  /*
  box-shadow: 0 8px 20px rgba(255, 87, 34, 0.6);
  */
  background: #107569;
}
.show-order-dashboard .product-wallet-charging .message-btn-container .btn:active {
  transform: translateY(1px);
}
.show-order-dashboard .product-wallet-charging .balance-info {
  background: #fffcfa;
  border-radius: 12px;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  border-left: 4px solid #FF9800;
}
.show-order-dashboard .product-wallet-charging .balance-label {
  font-size: 12px;
  color: #5D4037;
}
.show-order-dashboard .product-wallet-charging .balance-amount {
  font-size: 15px;
  font-weight: 700;
  color: #E65100;
}
.show-order-dashboard .product-wallet-charging .alert-footer {
  margin-top: 20px;
  text-align: start;
  font-size: 1.2rem;
  color: #9e9e9e;
  padding-top: 0;
  border-top: 1px dashed #eee;
}
.show-order-dashboard .product-wallet-charging .decoration {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 80px;
  height: 80px;
  background: rgba(255, 213, 79, 0.1);
  border-radius: 50%;
  z-index: 0;
}
@media (max-width: 500px) {
  .show-order-dashboard .product-wallet-charging .alert {
    padding: 20px 15px;
  }
  .show-order-dashboard .product-wallet-charging .wallet-icon {
    width: 50px;
    height: 50px;
  }
  .show-order-dashboard .product-wallet-charging .wallet-alert {
    padding: 10px;
  }
}
@media (max-width: 480px) {
  .show-order-dashboard .product-wallet-charging .wallet-alert .alert-header, .show-order-dashboard .product-wallet-charging .wallet-alert .message-btn-container {
    flex-direction: column;
    justify-content: start;
    gap: 15px;
  }
  .show-order-dashboard .product-wallet-charging .wallet-alert .alert-header .header-title, .show-order-dashboard .product-wallet-charging .wallet-alert .alert-header .balance-info, .show-order-dashboard .product-wallet-charging .wallet-alert .alert-header p, .show-order-dashboard .product-wallet-charging .wallet-alert .alert-header a, .show-order-dashboard .product-wallet-charging .wallet-alert .message-btn-container .header-title, .show-order-dashboard .product-wallet-charging .wallet-alert .message-btn-container .balance-info, .show-order-dashboard .product-wallet-charging .wallet-alert .message-btn-container p, .show-order-dashboard .product-wallet-charging .wallet-alert .message-btn-container a {
    width: 100%;
  }
  .show-order-dashboard .product-wallet-charging .wallet-alert .message-btn-container p {
    text-align: start;
    gap: 5px;
  }
  .show-order-dashboard .product-wallet-charging .wallet-alert .message-btn-container a {
    text-align: center;
    justify-content: center;
  }
}
.show-order-dashboard .add-btn {
  display: flex;
  gap: 5px;
  appearance: none;
  align-items: center;
  justify-content: center;
  user-select: none;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  outline-offset: 2px;
  border-radius: 10px;
  font-weight: 600;
  height: 40px;
  font-size: 14px;
  color: #596269;
  background-color: transparent;
  border: 1px solid #ced0d2;
  padding: 0 15px;
  margin-bottom: 0;
  transition: all 0.3s ease;
}
.show-order-dashboard .add-btn i, .show-order-dashboard .add-btn svg {
  font-size: 1rem;
}
.show-order-dashboard .add-btn span {
  height: initial;
  padding: 0;
}
.show-order-dashboard .add-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background-color: #348fe2;
  color: #fff;
  border-color: #348fe2;
}
.show-order-dashboard #productModal.modal {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.show-order-dashboard #productModal.modal .close-btn {
  top: 20px;
}
.show-order-dashboard #productModal.modal .close-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(180deg) scale(1.1);
}
.show-order-dashboard #productModal.modal .modal-content {
  background: linear-gradient(145deg, #ffffff, #f8f9ff);
  width: 95%;
  max-width: 800px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  animation: modalOpen 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  perspective: 1000px;
  border: 1px solid rgba(106, 17, 203, 0.15);
  padding: 20px;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body {
  display: block;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .search-container {
  position: relative;
  margin-bottom: 20px;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .search-container i, .show-order-dashboard #productModal.modal .modal-content .modal-body .search-container svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #307dc3;
  font-size: 0.9rem;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .search-container input {
  width: 100%;
  padding: 0 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  height: 50px;
  transition: all 0.3s ease;
  background: #fff;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.07);
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .search-container input::placeholder {
  color: #999;
  font-size: 14px;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .search-container input:focus {
  border-color: #307dc3;
  outline: none;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list {
  min-height: 25px;
  max-height: 480px;
  overflow-y: auto;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row {
  display: flex;
  align-items: center;
  padding: 5px;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  position: relative;
  cursor: pointer;
  gap: 10px;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-select {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  accent-color: #2a72b5;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-image {
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf6 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a72b5;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info {
  flex-grow: 1;
  text-align: start;
  width: calc(100% - 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .product-name {
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: -0.5px;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .product-name h4 {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  line-height: initial;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .price-stock .product-price {
  color: #275e91;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 10px;
  display: inline-block;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .price-stock .product-stock {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 700;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .price-stock .stock-high {
  background: rgba(46, 204, 113, 0.15);
  color: #27ae60;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .price-stock .stock-medium {
  background: rgba(241, 196, 15, 0.15);
  color: #f39c12;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .price-stock .stock-low {
  background: rgba(231, 76, 60, 0.15);
  color: #c0392b;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row.pm-unavailable {
  opacity: 0.5;
  background-color: #fff4f4;
  cursor: not-allowed;
  pointer-events: none;
  border-inline-start: 3px solid #f5c6c6;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row.pm-unavailable .product-info .product-title {
  color: #999;
  text-decoration: line-through;
}
.show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row.pm-unavailable .select-indicator {
  border-color: #e0c0c0;
  background: #fce8e8;
}
.show-order-dashboard #productModal.modal .modal-content .modal-footer button {
  flex: initial;
}
.show-order-dashboard #productModal.modal .select-indicator {
  position: absolute;
  top: 10px;
  transform: translateY(-50%);
  right: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  border: 1px solid #2a72b5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0;
}
.show-order-dashboard #productModal.modal .select-indicator::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6a11cb;
  transform: scale(0);
  transition: transform 0.3s ease;
}
.show-order-dashboard #productModal.modal .product-row.selected .select-indicator::after {
  transform: scale(1);
}
.show-order-dashboard #productModal.modal .modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 10px 10px;
  /*    background: #f8f9ff;
      border-top: 1px solid #eee;
      box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.03);*/
}
.show-order-dashboard #productModal.modal .modal-footer:after, .show-order-dashboard #productModal.modal .modal-footer:before {
  display: none;
}
.show-order-dashboard #productModal.modal .modal-footer div {
  display: flex;
  align-items: center;
  gap: 0;
}
.show-order-dashboard #productModal.modal .cancel-btn,
.show-order-dashboard #productModal.modal .add-products-btn {
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 45px;
}
.show-order-dashboard #productModal.modal .cancel-btn {
  color: rgb(0, 0, 0);
  background: transparent;
  border: 1px solid rgb(182, 194, 201);
}
.show-order-dashboard #productModal.modal .add-products-btn:hover {
  transform: translateY(-2px) scale(1.02);
}
.show-order-dashboard #productModal.modal .selected-count {
  color: #2B70AE;
  font-weight: 700;
}
.show-order-dashboard #productModal.modal {
  /* تخصيص شريط التمرير */
}
.show-order-dashboard #productModal.modal .products-list::-webkit-scrollbar {
  width: 12px;
}
.show-order-dashboard #productModal.modal .products-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 12px;
  margin: 15px 0;
}
.show-order-dashboard #productModal.modal .products-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 12px;
  border: 3px solid #f1f1f1;
}
.show-order-dashboard #productModal.modal .products-list {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}
.show-order-dashboard #productModal.modal .product-row.selected {
  background: #ebf4ff;
}
.show-order-dashboard #productModal.modal .pulse {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 12px 30px rgba(106, 17, 203, 0.4);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(106, 17, 203, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 12px 30px rgba(106, 17, 203, 0.4);
  }
}
@media (max-width: 480px) {
  .show-order-dashboard .add-btn {
    height: 35px;
    width: 35px;
    padding: 0;
  }
  .show-order-dashboard .add-btn span {
    display: none;
  }
  .show-order-dashboard #productModal.modal {
    padding: 15px;
  }
  .show-order-dashboard #productModal.modal .modal-content {
    width: 100%;
    padding: 15px 10px;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body {
    padding: 10px 0;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body .search-container {
    margin-bottom: 10px;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body .search-container input {
    height: 40px;
    font-size: 1.3rem;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row {
    padding: 5px 0;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-image {
    width: 45px;
    height: 45px;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .product-name {
    letter-spacing: -1px;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .product-name h4 {
    font-size: 14px;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .price-stock .product-price {
    font-size: 1.2rem;
    padding: 0;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .price-stock .product-stock {
    padding: 3px 7px;
    border-radius: 5px;
    margin-top: 0;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-body .products-list .product-row .product-info .price-stock:has(.product-stock) .product-price {
    display: none;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-footer {
    padding: 10px 0 0;
    flex-direction: column;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-footer div {
    width: 100%;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-footer div .selected-count {
    margin: auto auto 0;
  }
  .show-order-dashboard #productModal.modal .modal-content .modal-footer div button {
    padding: 0 10px;
    height: 36px;
    flex: min-content;
  }
}
.show-order-dashboard .card .summary-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.show-order-dashboard .card .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 0;
}
.show-order-dashboard .card .summary-row .label {
  font-size: 14px;
  color: #4a5568;
  display: flex;
  align-items: center;
  gap: 8px;
}
.show-order-dashboard .card .summary-row .value {
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
}
.show-order-dashboard .card .summary-row .coupon_container {
  display: flex;
  align-items: center;
  gap: 15px;
  direction: initial;
}
.show-order-dashboard .card .summary-row .coupon_container span {
  color: #333;
  font-weight: bold;
}
.show-order-dashboard {
  /* Payment Section */
}
.show-order-dashboard .payment-section .payment-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}
.show-order-dashboard .payment-section .payment-header {
  background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
  color: white;
  padding: 20px 24px;
}
.show-order-dashboard .payment-section .payment-header h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.show-order-dashboard .payment-section .payment-body {
  padding: 24px;
  display: grid;
  gap: 30px;
}
.show-order-dashboard .payment-section .discount-row .value {
  color: #ed3636;
}
.show-order-dashboard .payment-section .summary-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
}
.show-order-dashboard .payment-section .total-row {
  padding: 15px 0 0;
  border-top: 1px solid #e2e8f0;
}
.show-order-dashboard .payment-section .total-row .label {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}
.show-order-dashboard .payment-section .total-row .value {
  font-size: 20px;
  font-weight: 700;
  color: #2a70ae;
}
.show-order-dashboard .payment-section .payment-status-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.show-order-dashboard .payment-section .status-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.show-order-dashboard .payment-section .status-item label {
  font-size: 12px;
  color: #718096;
  font-weight: 600;
}
.show-order-dashboard .payment-section .status-badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.show-order-dashboard .payment-section .status-paid {
  background: rgba(56, 161, 105, 0.1);
  color: #38a169;
}
.show-order-dashboard .payment-section .status-pending {
  background: rgba(237, 137, 54, 0.1);
  color: #ed8936;
}
.show-order-dashboard .payment-section .status-unpaid {
  background: rgba(229, 62, 62, 0.1);
  color: #e53e3e;
}
.show-order-dashboard .payment-section .payment-method {
  font-size: 14px;
  color: #2d3748;
  font-weight: 500;
}
.show-order-dashboard .payment-section .alert-warning {
  background: rgba(237, 137, 54, 0.1);
  border: 1px solid rgba(237, 137, 54, 0.2);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c05621;
  font-size: 13px;
}
.show-order-dashboard .payment-section {
  /* Responsive Design */
}
@media (max-width: 1024px) {
  .show-order-dashboard .payment-section .payment-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .show-order-dashboard .payment-section .pricing-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 768px) {
  .show-order-dashboard .payment-section .order-item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .show-order-dashboard .payment-section .item-pricing-section {
    width: 100%;
    min-width: auto;
  }
  .show-order-dashboard .payment-section .pricing-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .show-order-dashboard .payment-section .search-section {
    flex-direction: column;
  }
  .show-order-dashboard .payment-section .search-filter {
    min-width: auto;
    width: 100%;
  }
  .show-order-dashboard .payment-section .product-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .show-order-dashboard .payment-section .product-quantity {
    align-self: flex-end;
  }
}
@media (max-width: 480px) {
  .show-order-dashboard .payment-section .order-items-container {
    padding: 16px;
  }
  .show-order-dashboard .payment-section .custom-modal .modal-dialog {
    margin: 16px;
    max-width: none;
  }
  .show-order-dashboard .payment-section .pricing-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .show-order-dashboard .payment-section .tab-buttons {
    flex-direction: column;
    gap: 4px;
  }
}
.show-order-dashboard .current-payment {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px;
}
.show-order-dashboard .current-payment .change-btn, .show-order-dashboard .current-payment .view-receipt-btn {
  background: transparent;
  border: 1px solid #c6cdd9;
  margin: 0;
  width: 25px;
  height: 25px;
  color: #475264;
  padding: 0 2px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.3s ease;
  overflow: initial;
}
.show-order-dashboard .current-payment .change-btn .tooltip-text, .show-order-dashboard .current-payment .view-receipt-btn .tooltip-text {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  height: initial;
}
.show-order-dashboard .current-payment .change-btn:hover, .show-order-dashboard .current-payment .view-receipt-btn:hover {
  transform: translateY(-2px);
  background-color: #348fe2;
  color: #fff;
  border-color: #348fe2;
  box-shadow: 0 5px 15px rgba(81, 144, 208, 0.37);
}
.show-order-dashboard .current-payment .change-btn:hover .tooltip-text, .show-order-dashboard .current-payment .view-receipt-btn:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content {
  padding: 10px;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .form-group, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .form-group {
  margin-bottom: 10px;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .form-group .payment-select, .show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .form-group .receiving-select, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .form-group .payment-select, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .form-group .receiving-select {
  width: 100%;
  padding: 0 10px;
  border: 1px solid #e0e0e0;
  border-radius: 7px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  font-weight: 600;
  height: 45px;
  background-color: #fff;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .form-group .payment-select:focus, .show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .form-group .receiving-select:focus, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .form-group .payment-select:focus, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .form-group .receiving-select:focus {
  outline: none;
  border-color: #348fe2;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container {
  display: none;
  border: 1px dashed #e0e0e0;
  border-radius: 8px;
  text-align: center;
  background-color: #f8f9fa;
  position: relative;
  min-height: 150px;
  transition: all 0.3s ease;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container.active, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container.active {
  display: block;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .upload-area, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 130px;
  cursor: pointer;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #6c757d;
  padding: 15px;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label i, .show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label svg, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label i, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label svg {
  font-size: 40px;
  margin-bottom: 0;
  color: #348fe2;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label small, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label small {
  color: #6c757d;
  font-size: 12px;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label .click-upload, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label .click-upload {
  font-size: 16px;
  margin-bottom: 0;
  font-weight: bold;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label .file-name, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .upload-area .upload-label .file-name {
  font-size: 14px;
  color: #348fe2;
  font-weight: 500;
  margin-top: 0;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .upload-area .file-input, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .upload-area .file-input {
  display: none !important;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .preview-area, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .preview-area {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .preview-area.active, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .preview-area.active {
  display: block;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .preview-area .receipt-preview, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .preview-area .receipt-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin: 0 auto;
  display: block;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .preview-area .preview-actions, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .preview-area .preview-actions {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 10px;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .preview-area .preview-actions .preview-btn, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .preview-area .preview-actions .preview-btn {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}
.show-order-dashboard #paymentMethodModal .modal-content .modal-body-content .receipt-container .preview-area .preview-actions .preview-btn:hover, .show-order-dashboard #receivingMethodModal .modal-content .modal-body-content .receipt-container .preview-area .preview-actions .preview-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.show-order-dashboard .receipt-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.show-order-dashboard .receipt-modal .receipt-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.show-order-dashboard .receipt-modal.active {
  opacity: 1;
  visibility: visible;
}
.show-order-dashboard .receipt-modal .receipt-content {
  background: white;
  border-radius: 10px;
  padding: 20px;
  max-width: 40%;
  max-height: 80vh;
  position: relative;
}
.show-order-dashboard .receipt-modal .receipt-content .receipt-img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}
.show-order-dashboard .receipt-modal .receipt-content .close-receipt {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}
.show-order-dashboard :root {
  --primary-blue: #2563eb;
  --light-blue: #dbeafe;
  --status-neutral: #6b7280;
  --light-neutral: #f3f4f6;
  --warning-yellow: #f59e0b;
  --light-yellow: #fef3c7;
  --gray-light: #f3f4f6;
  --gray-medium: #9ca3af;
  --gray-dark: #374151;
  --white: #ffffff;
  --black: #000000;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --radius: 12px;
  --radius-sm: 8px;
}
.show-order-dashboard #shippingState hr {
  border-top: 1px solid #e6ecf0;
}
.show-order-dashboard #shippingState {
  /* Main Content */
}
.show-order-dashboard #shippingState .shipping-content {
  padding: 0;
  margin: 0;
}
.show-order-dashboard #shippingState {
  /* Company Info Section */
}
.show-order-dashboard #shippingState .company-info {
  padding: 0;
  margin-bottom: 0;
  position: relative;
}
.show-order-dashboard #shippingState .company-info .company-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 16px;
}
.show-order-dashboard #shippingState .company-info .company-main .company-details {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}
.show-order-dashboard #shippingState .company-info .company-main .company-details .company-logo {
  width: 50px;
  height: 50px;
  background: #348fe2;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9375rem;
  flex-shrink: 0;
  overflow: hidden;
}
.show-order-dashboard #shippingState .company-info .company-main .company-details .company-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.show-order-dashboard #shippingState .company-info .company-main .company-details .company-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.show-order-dashboard #shippingState .company-info .company-main .company-details .company-text .company-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 0;
}
.show-order-dashboard #shippingState .company-info .company-main .company-details .company-text .order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 9px;
  font-size: 0.7rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 1px solid #f59e0b;
}
.show-order-dashboard #shippingState .company-info .company-main {
  /* Change Company Button */
}
.show-order-dashboard #shippingState .company-info .company-main .change-company-btn {
  background: transparent;
  border: none;
  color: #2B70AE;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: 1s ease-in;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.show-order-dashboard #shippingState .company-info .company-main .change-company-btn:hover {
  background-color: #E6F0FF;
}
.show-order-dashboard #shippingState .company-info {
  /* Address */
}
.show-order-dashboard #shippingState .company-info .shipping-address {
  background: #f5fbff;
  padding: 15px;
  border-radius: 7px;
  border-right: 4px solid #348fe2;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.show-order-dashboard #shippingState .company-info .shipping-address .address-label {
  font-size: 0.7rem;
  color: #798db0;
  margin-bottom: 5px;
  font-weight: 600;
}
.show-order-dashboard #shippingState .company-info .shipping-address .address-text {
  color: #333f54;
  line-height: 1.6;
  font-weight: bold;
  font-size: 0.9rem;
}
.show-order-dashboard #shippingState .company-info .shipping-address {
  /* Delivery Attempts */
}
.show-order-dashboard #shippingState .company-info .shipping-address .delivery-attempts-box {
  background: #e4f0f9;
  border-radius: 5px;
  padding: 6px 10px;
  border: 1px solid #ebf2f7;
}
.show-order-dashboard #shippingState .company-info .shipping-address .delivery-attempts-box .attempts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.show-order-dashboard #shippingState .company-info .shipping-address .delivery-attempts-box .attempts-header .attempts-title {
  font-weight: 600;
  color: var(--gray-dark);
}
.show-order-dashboard #shippingState .company-info .shipping-address .delivery-attempts-box .attempts-header .shipping-tooltip {
  position: relative;
  cursor: help;
}
.show-order-dashboard #shippingState .company-info .shipping-address .delivery-attempts-box .attempts-header .shipping-tooltip .shipping-tooltip-icon {
  color: var(--gray-medium);
  font-size: 1rem;
}
.show-order-dashboard #shippingState .company-info .shipping-address .shipping-tooltip:hover .shipping-tooltip-text {
  visibility: visible;
  opacity: 1;
}
.show-order-dashboard #shippingState .company-info .shipping-address .shipping-tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  right: 50%;
  transform: translateX(50%);
  background-color: var(--gray-dark);
  color: var(--white);
  text-align: center;
  border-radius: 7px;
  padding: 12px;
  z-index: 1;
  width: 230px;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: opacity 0.3s;
}
.show-order-dashboard #shippingState .company-info .shipping-address .shipping-tooltip-text h4 {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  margin-top: 0;
}
.show-order-dashboard #shippingState .company-info .shipping-address .attempts-list {
  display: flex;
  justify-content: start;
  gap: 7px;
}
.show-order-dashboard #shippingState .company-info .shipping-address .attempts-list .attempt-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.show-order-dashboard #shippingState .company-info .shipping-address .attempts-list .attempt-normal {
  background: var(--gray-medium);
}
.show-order-dashboard #shippingState .company-info .shipping-address .attempts-list .attempt-success {
  background: #17B26A;
}
.show-order-dashboard #shippingState .company-info .shipping-address .attempts-list .attempt-warning {
  background: var(--warning-yellow);
}
.show-order-dashboard #shippingState .company-info .shipping-address .attempts-list .attempt-failure {
  background: #E30A18;
}
.show-order-dashboard #shippingState {
  /* Status Colors - Neutral Palette */
}
.show-order-dashboard #shippingState .status-pending {
  background: var(--light-yellow);
  color: var(--warning-yellow);
}
.show-order-dashboard #shippingState .status-processing {
  background: var(--light-blue);
  color: #348fe2;
}
.show-order-dashboard #shippingState .status-shipped {
  background: #e0f2fe;
  color: #0277bd;
}
.show-order-dashboard #shippingState .status-delivered {
  background: var(--light-neutral);
  color: var(--status-neutral);
}
.show-order-dashboard #shippingState .status-cancelled {
  background: var(--light-neutral);
  color: var(--status-neutral);
}
.show-order-dashboard #shippingState #changeCompanyModal .modal-dialog, .show-order-dashboard #shippingState #chooseShippingCompanyModal .modal-dialog {
  margin-top: 100px;
}
.show-order-dashboard #shippingState #changeCompanyModal .modal-body, .show-order-dashboard #shippingState #chooseShippingCompanyModal .modal-body {
  padding: 0;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin: 15px 0;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option {
  border: 1px solid var(--gray-light);
  border-radius: 7px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option.selected, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option.selected {
  border-color: #a5b8ca;
  background: #eff6ff;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option.disabled, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f9fafb;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option.disabled:hover, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option.disabled:hover {
  transform: none;
  box-shadow: none;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option:hover, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option:hover {
  border-color: #a5b8ca;
  background: #eff6ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option .company-option-header, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option .company-option-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option .company-option-header .company-option-logo, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option .company-option-header .company-option-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  overflow: hidden;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option .company-option-header .company-option-logo img, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option .company-option-header .company-option-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option .company-option-header .company-option-name, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option .company-option-header .company-option-name {
  font-weight: 700;
  color: var(--gray-dark);
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option .company-status-label, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option .company-status-label {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option .status-available, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option .status-available {
  background: #ecffe6;
  color: #418b3b;
}
.show-order-dashboard #shippingState #changeCompanyModal .company-grid .company-option .status-coming-soon, .show-order-dashboard #shippingState #chooseShippingCompanyModal .company-grid .company-option .status-coming-soon {
  background: var(--light-neutral);
  color: var(--status-neutral);
}
.show-order-dashboard #shippingState #changeCompanyModal .modal-footer button, .show-order-dashboard #shippingState #chooseShippingCompanyModal .modal-footer button {
  flex: 1;
  height: 45px;
  border-radius: 8px;
  justify-content: center;
  border: 1px solid #D0D5DD;
  color: #475264;
  background-color: transparent;
}
.show-order-dashboard #shippingState #changeCompanyModal .modal-footer button:hover, .show-order-dashboard #shippingState #chooseShippingCompanyModal .modal-footer button:hover {
  background-color: #e9e9ed;
}
.show-order-dashboard #shippingState #changeCompanyModal .modal-footer #confirmChangeBtn, .show-order-dashboard #shippingState #chooseShippingCompanyModal .modal-footer #confirmChangeBtn {
  color: #fff;
  background: #348fe2;
  border-color: #348fe2;
}
.show-order-dashboard #shippingState #changeCompanyModal, .show-order-dashboard #shippingState #chooseShippingCompanyModal {
  /* Alert */
}
.show-order-dashboard #shippingState #changeCompanyModal .alert, .show-order-dashboard #shippingState #chooseShippingCompanyModal .alert {
  background: var(--light-yellow);
  border: 1px solid var(--warning-yellow);
  color: #92400e;
  padding: 12px;
  border-radius: 7px;
  margin: 20px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.show-order-dashboard #shippingState #changeCompanyModal .alert .text-container, .show-order-dashboard #shippingState #chooseShippingCompanyModal .alert .text-container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: start;
}
.show-order-dashboard #shippingState #changeCompanyModal .alert .text-container .alert-icon, .show-order-dashboard #shippingState #chooseShippingCompanyModal .alert .text-container .alert-icon {
  color: var(--warning-yellow);
  font-size: 1.5625rem;
}
.show-order-dashboard #shippingState #changeCompanyModal .alert .charge-option, .show-order-dashboard #shippingState #chooseShippingCompanyModal .alert .charge-option {
  margin-top: 10px;
}
.show-order-dashboard #shippingState #changeCompanyModal .alert .charge-option label, .show-order-dashboard #shippingState #chooseShippingCompanyModal .alert .charge-option label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
}
.show-order-dashboard #shippingState #changeCompanyModal .alert .charge-option label input, .show-order-dashboard #shippingState #chooseShippingCompanyModal .alert .charge-option label input {
  width: 16px;
  height: 16px;
}
.show-order-dashboard #shippingState {
  /* Customer Opening Option - Improved Section */
}
.show-order-dashboard #shippingState .customer-opening-section {
  margin: 10px 0 0;
  border: 1px solid #dbe4e9;
  background: #f5fbff;
  border-radius: var(--radius);
  padding: 20px;
  transition: all 0.3s ease;
  border-radius: 7px;
}
.show-order-dashboard #shippingState .customer-opening-section .section-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #627391;
  display: flex;
  align-items: center;
  gap: 5px;
}
.show-order-dashboard #shippingState .customer-opening-section .switch-container {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.show-order-dashboard #shippingState .customer-opening-section .switch-container .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 25px;
  margin-bottom: 0;
}
.show-order-dashboard #shippingState .customer-opening-section .switch-container .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.show-order-dashboard #shippingState .customer-opening-section .switch-container .switch-label {
  color: #333f54;
  line-height: 1.6;
  font-weight: bold;
  font-size: 0.9rem;
}
.show-order-dashboard #shippingState .customer-opening-section .switch-container .opening-description {
  color: var(--gray-medium);
  font-size: 1rem;
  margin-bottom: 0;
  line-height: 1;
}
.show-order-dashboard #shippingState .customer-opening-section .switch-container .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #9ca3af;
  transition: 0.4s;
  border-radius: 34px;
}
.show-order-dashboard #shippingState .customer-opening-section .switch-container .slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  right: 5px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.show-order-dashboard #shippingState .customer-opening-section input:checked + .slider {
  background-color: #348fe2;
}
.show-order-dashboard #shippingState .customer-opening-section input:checked + .slider:before {
  transform: translateX(-23px);
  right: -5px;
}
.show-order-dashboard #shippingState .customer-opening-section .opening-fee {
  background: #EAF3FF;
  padding: 12px;
  border-radius: 5px;
  border-right: 4px solid #348fe2;
  margin: 10px 0;
  display: none;
  animation: fadeIn 0.3s ease;
}
.show-order-dashboard #shippingState .customer-opening-section .opening-fee .opening-fee-text {
  font-weight: 600;
  color: #343a40;
  display: flex;
  align-items: center;
  gap: 5px;
}
.show-order-dashboard #shippingState .customer-opening-section .charge-option label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.show-order-dashboard #shippingState .customer-opening-section .charge-option label input {
  margin: 0;
  width: 18px;
  height: 18px;
}
.show-order-dashboard #shippingState .order-contact-note {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  color: #3b3b3b;
  font-size: 14px;
  direction: rtl;
}
.show-order-dashboard #shippingState .order-contact-note .order-contact-text {
  color: #333;
  line-height: 1;
  white-space: nowrap;
}
.show-order-dashboard #shippingState .order-contact-note .contact-link {
  display: inline-block;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  color: #c33039;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.show-order-dashboard #shippingState .order-contact-note .contact-link:hover, .show-order-dashboard #shippingState .order-contact-note .contact-link:focus {
  background: #fff4f4;
  transform: translateY(-1px);
  outline: none;
  border-color: #e6c4c4;
}
.show-order-dashboard #shippingState {
  /* Action Buttons */
}
.show-order-dashboard #shippingState .action-buttons {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
  margin-top: 10px;
}
.show-order-dashboard #shippingState .action-buttons .action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 20px;
  border: 1px solid transparent;
  background-color: transparent;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin: 0;
  border-radius: 7px;
}
.show-order-dashboard #shippingState .action-buttons .action-btn span {
  height: initial;
  padding: 0;
}
.show-order-dashboard #shippingState .action-buttons .action-btn:hover, .show-order-dashboard #shippingState .action-buttons .action-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
}
.show-order-dashboard #shippingState .action-buttons .action-btn:active {
  transform: scale(0.95);
}
.show-order-dashboard #shippingState .action-buttons .action-btn:focus {
  outline: initial;
  outline-offset: initial;
}
.show-order-dashboard #shippingState .action-buttons #trackOrderBtn, .show-order-dashboard #shippingState .action-buttons .printAWB {
  border-color: #D0D5DD;
  color: #475264;
}
.show-order-dashboard #shippingState .action-buttons .cancelShippingPolicy, .show-order-dashboard #shippingState .action-buttons .retrievedShippingPolicy {
  border-color: #B42318;
  color: #B42318;
}
.show-order-dashboard #shippingState .action-buttons .cancelShippingPolicy:hover, .show-order-dashboard #shippingState .action-buttons .retrievedShippingPolicy:hover {
  background-color: #ffedec;
  border-color: #edd2d0;
}
.show-order-dashboard #shippingState .action-buttons .shippingPolicy {
  border-color: #0E9384;
  background-color: #0E9384;
  color: #fff;
}
.show-order-dashboard #shippingState .action-buttons .shippingPolicy:hover {
  background-color: #107569;
  color: #fff;
}
.show-order-dashboard #shippingState .action-buttons .shippingPolicy:active {
  background-color: #107569;
}
.show-order-dashboard #shippingState .action-buttons {
  /*    .retrievedShippingPolicy,.shippingPolicy{
        background-color: #B42318;
        &:hover,&:focus{
          color: #fff;
        }
      }
      .printAWB{
        background-color: #25A669;
        &:hover,&:focus{
          color: #fff;
        }
      }*/
}
.show-order-dashboard #shippingState .btn-neutral {
  background: var(--status-neutral);
  color: var(--white);
}
.show-order-dashboard #shippingState .btn-neutral:hover {
  background: #4b5563;
}
.show-order-dashboard #shippingState .btn-warning {
  background: var(--warning-yellow);
  color: var(--white);
}
.show-order-dashboard #shippingState .btn-warning:hover {
  background: #d97706;
}
.show-order-dashboard #shippingState .btn-wallet {
  background: #348fe2;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  text-align: center;
}
.show-order-dashboard #shippingState .wallet-amount {
  font-weight: 800;
  font-size: 1.1rem;
  margin-top: 4px;
  color: var(--light-yellow);
}
.show-order-dashboard #shippingState .tracking-number-box {
  background: white;
  border-radius: 10px;
  padding: 15px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #e1f0fa;
  position: relative;
  overflow: hidden;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container {
  display: flex;
  align-items: center;
  gap: 15px;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-icon {
  background: linear-gradient(135deg, #3498db 0%, #cc2ec2 100%);
  width: 70px;
  height: 70px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-icon i, .show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-icon svg {
  font-size: 30px;
  color: white;
  transition: transform 0.3s ease;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-number-box:hover .tracking-icon i {
  transform: scale(1.1);
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-number-display {
  flex: 1;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-number-display .tracking-number-title {
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 500;
  display: block;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-number-display .number-container {
  display: flex;
  align-items: center;
  gap: 5px;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-number {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: 1px;
  font-family: "Courier New", monospace;
  direction: ltr;
  padding: 3px 8px;
  border-radius: 7px;
  background-color: rgba(236, 240, 241, 0.3);
  border: 2px dashed #e0e7ee;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .copy-icon {
  background: #f8f9fa;
  width: 40px;
  height: 40px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
  position: relative;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .copy-icon i, .show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .copy-icon svg {
  font-size: 18px;
  color: #3498db;
  transition: color 0.3s ease;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .copy-icon:hover {
  background: #e9ecef;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .copy-icon:hover i, .show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .copy-icon:hover svg {
  color: #2980b9;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container {
  /* Tooltip styles */
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tooltip {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  background: #2ecc71;
  color: white;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s, top 0.3s;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tooltip:after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: #2ecc71 transparent transparent;
}
.show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tooltip.show {
  opacity: 1;
  top: -34px;
}
.show-order-dashboard #shippingState .tracking-number-box #trackOrderBtn {
  border-color: #D0D5DD;
  color: #475264;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  position: relative;
  z-index: 2;
  gap: 8px;
  padding: 0 15px;
  background-color: transparent;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin: 0;
  border: 1px solid #c6cdd9;
}
.show-order-dashboard #shippingState .tracking-number-box #trackOrderBtn span {
  height: initial;
  padding: 0;
}
.show-order-dashboard #shippingState .tracking-number-box #trackOrderBtn:hover, .show-order-dashboard #shippingState .tracking-number-box #trackOrderBtn:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
  background-color: #348fe2;
  color: #fff;
  border-color: #348fe2;
  outline: initial;
  outline-offset: initial;
}
.show-order-dashboard #shippingState .tracking-number-box #trackOrderBtn:active {
  transform: scale(0.95);
}
.show-order-dashboard #shippingState .tracking-number-box .decoration {
  position: absolute;
  z-index: 0;
  opacity: 0.1;
}
.show-order-dashboard #shippingState .tracking-number-box .decoration-1 {
  top: -35px;
  left: -23px;
  font-size: 97px;
  color: #3498db;
}
.show-order-dashboard #shippingState .tracking-number-box .decoration-2 {
  bottom: -40px;
  right: -30px;
  font-size: 120px;
  color: #2ecc71;
  transform: rotate(25deg);
}
.show-order-dashboard #shippingState {
  /* Smooth Animations */
}
.show-order-dashboard #shippingState .fade-in {
  animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.show-order-dashboard #shippingState {
  /* Keyframes for animations */
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.show-order-dashboard #shippingState {
  /* Focus States for Accessibility */
}
.show-order-dashboard #shippingState .action-btn:focus,
.show-order-dashboard #shippingState .change-company-btn:focus,
.show-order-dashboard #shippingState .copy-btn:focus {
  outline: 2px solid #348fe2;
  outline-offset: 2px;
}
.show-order-dashboard #shippingState #shippingCompanyFounded {
  margin-bottom: 25px;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .shipping-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 0;
  text-align: center;
  width: 100%;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  margin: 0;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .shipping-icon-container {
  position: relative;
  margin: 0;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .shipping-icon-container img {
  width: 32%;
  margin: auto;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .icon-circle {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(245, 247, 250, 0.7);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  box-shadow: 0 0 0 12px rgba(245, 247, 250, 0.4), 0 0 0 24px rgba(245, 247, 250, 0.2);
}
.show-order-dashboard #shippingState #shippingCompanyFounded .title {
  color: #627d98;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
  position: relative;
  display: inline-block;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 50%;
  transform: translateX(50%);
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #348fe2 0%, #6e859a 100%);
  border-radius: 3px;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .description {
  color: #829ab1;
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 20px;
  font-weight: 400;
  padding: 0 10px;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .add-button {
  background-color: #348fe2;
  color: white;
  border: none;
  border-radius: 8px !important;
  padding: 15px 30px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(122, 152, 242, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  letter-spacing: 0.4px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .add-button i, .show-order-dashboard #shippingState #shippingCompanyFounded .add-button svg {
  color: #fff;
  margin: 0;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .add-button:hover, .show-order-dashboard #shippingState #shippingCompanyFounded .add-button:active, .show-order-dashboard #shippingState #shippingCompanyFounded .add-button::before {
  transform: translateY(-4px);
}
.show-order-dashboard #shippingState #shippingCompanyFounded .button-icon {
  margin-right: 10px;
  font-size: 1.2rem;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .corner-decoration {
  position: absolute;
  width: 80px;
  height: 80px;
  opacity: 0.15;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .corner-top-left {
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #a3c4f3 0%, transparent 70%);
  border-radius: 0 0 100% 0;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .corner-bottom-right {
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, #cfbaf0 0%, transparent 70%);
  border-radius: 100% 0 0 0;
}
.show-order-dashboard #shippingState #shippingCompanyFounded .add_customer_address_to_ship {
  padding: 15px;
  background-color: #ffeded;
  color: #b8312e;
  border: 1px solid #ffdbdb;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 15px;
}
.show-order-dashboard #shippingState #shippingCompanyFounded {
  /* تصميم متجاوب */
}
@media (max-width: 480px) {
  .show-order-dashboard #shippingState #shippingCompanyFounded .shipping-card {
    padding: 35px 25px;
    border-radius: 20px;
  }
  .show-order-dashboard #shippingState #shippingCompanyFounded .shipping-icon {
    font-size: 2.8125rem;
  }
  .show-order-dashboard #shippingState #shippingCompanyFounded .icon-circle {
    width: 85px;
    height: 85px;
    box-shadow: 0 0 0 10px rgba(245, 247, 250, 0.4), 0 0 0 20px rgba(245, 247, 250, 0.2);
  }
  .show-order-dashboard #shippingState #shippingCompanyFounded .title {
    font-size: 0.875rem;
  }
  .show-order-dashboard #shippingState #shippingCompanyFounded .description {
    font-size: 1rem;
  }
  .show-order-dashboard #shippingState #shippingCompanyFounded .add-button {
    padding: 14px 32px;
    font-size: 1.05rem;
  }
  .show-order-dashboard #shippingState #shippingCompanyFounded .add_customer_address_to_ship {
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .show-order-dashboard #shippingState .tracking-number-box {
    flex-direction: column;
    text-align: center;
    padding: 15px 10px;
    gap: 15px;
  }
  .show-order-dashboard #shippingState .tracking-number-box .tracking-box-container {
    width: 100%;
  }
  .show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-icon {
    width: 60px;
    height: 60px;
  }
  .show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-icon i {
    font-size: 26px;
  }
  .show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-number-title {
    text-align: start;
    margin: 0;
  }
  .show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .number-container {
    /*flex-direction: column;*/
    gap: 20px;
  }
  .show-order-dashboard #shippingState .tracking-number-box .tracking-box-container .tracking-number {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .show-order-dashboard #shippingState .tracking-number-box .action-btn {
    width: 100%;
  }
  .show-order-dashboard #shippingState .customer-opening-section {
    padding: 15px;
    margin-bottom: 0;
  }
  .show-order-dashboard #shippingState .customer-opening-section .section-title {
    margin-bottom: 7px;
  }
  .show-order-dashboard #shippingState .customer-opening-section .switch-container {
    gap: 5px;
    margin-bottom: 4px;
  }
  .show-order-dashboard #shippingState .shipping-content {
    padding: 20px;
  }
  .show-order-dashboard #shippingState .shipping-content .company-main {
    flex-direction: column;
    align-items: flex-start;
  }
  .show-order-dashboard #shippingState .shipping-content .company-main .company-details {
    width: 100%;
  }
  .show-order-dashboard #shippingState .change-company-btn {
    align-self: flex-start;
    margin-top: 12px;
  }
  .show-order-dashboard #shippingState .tracking-grid {
    grid-template-columns: 1fr;
  }
  .show-order-dashboard #shippingState .action-buttons {
    grid-template-columns: 1fr;
  }
  .show-order-dashboard #shippingState .modal-content {
    margin: 10% auto;
    width: 95%;
  }
  .show-order-dashboard #shippingState .company-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .show-order-dashboard #shippingState .company-name {
    font-size: 1.2rem;
  }
  .show-order-dashboard #shippingState .action-buttons {
    margin-top: 15px;
  }
  .show-order-dashboard #shippingState .action-buttons .action-btn {
    height: 36px;
    padding: 0 10px;
    gap: 5px;
  }
  .show-order-dashboard #shippingState .action-buttons .printAWB span {
    display: none;
  }
  .show-order-dashboard #shippingState .action-btn {
    font-size: 0.85rem;
  }
}
.show-order-dashboard #orderHistory .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}
.show-order-dashboard #orderHistory .panel-head #orderAddComment {
  height: 35px;
  border-radius: 5px;
  background-color: #348fe2;
  color: #fff;
  margin: initial;
  border: navajowhite;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 14px;
}
.show-order-dashboard #orderHistory .panel-head #orderAddComment span {
  font-size: 12px;
  padding: 0 3px;
  height: 35px;
}
.show-order-dashboard #orderHistory .card-body #textareaComments {
  width: 100%;
  /*padding: 15px;
  background: #f5fbff;
  border: 1px solid #eef3f6;
  border-radius: 7px;*/
  margin-bottom: 10px;
  border-bottom: 1px solid #f4f4f4;
  padding-bottom: 6px;
}
.show-order-dashboard #orderHistory .card-body #textareaComments .formContainer {
  display: flex;
  justify-content: end;
  position: relative;
}
.show-order-dashboard #orderHistory .card-body #textareaComments .formContainer #textareaForm {
  width: 100%;
  background-color: transparent;
  border-radius: 5px;
  z-index: 5;
  display: flex;
  align-items: center;
}
.show-order-dashboard #orderHistory .card-body #textareaComments .formContainer #textareaForm .form-group {
  margin-bottom: 0;
  flex: 1;
}
.show-order-dashboard #orderHistory .card-body #textareaComments .formContainer #textareaForm .form-group textarea.form-control {
  height: 40px;
  max-height: 40px !important;
  max-width: 100%;
  min-width: 70%;
  min-height: 40px;
  border: 1px solid #dee5eb;
  border-radius: 7px;
}
.show-order-dashboard #orderHistory .card-body #textareaComments .formContainer #textareaForm .form-group textarea.form-control:focus {
  border-color: #4891da;
}
.show-order-dashboard #orderHistory .card-body #textareaComments .formContainer #textareaForm button {
  height: 40px;
  font-size: 12px;
  cursor: not-allowed;
  transition: all 0.3s;
  border-radius: 7px;
}
.show-order-dashboard #orderHistory .card-body #textareaComments .formContainer #textareaForm button.active {
  background-color: #0e9384;
  border-color: #0e9384;
  box-shadow: none;
  cursor: pointer;
}
.show-order-dashboard #orderHistory .card-body #textareaComments .formContainer #textareaForm button.active:hover {
  background-color: #0e9384;
  border-color: #0e9384;
  box-shadow: none;
}
.show-order-dashboard #orderHistory .card-body #textareaComments .formContainer #textareaForm button:disabled {
  background-color: #ddd !important;
  border-color: #ddd !important;
  color: #333 !important;
  cursor: not-allowed;
  opacity: 0.5;
}
.show-order-dashboard #orderHistory .card-body ul {
  max-height: 500px;
  overflow-x: auto;
}
.show-order-dashboard #orderHistory .card-body ul li {
  margin-bottom: 7px;
  border-bottom: 1px solid #f4f4f4;
  padding-bottom: 7px;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item {
  display: flex;
  position: relative;
  gap: 10px;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item .history-icon-div {
  text-align: center;
  margin: 0;
  background-color: #fff;
  z-index: 3;
  position: relative;
  width: 70px;
  flex-shrink: 0;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item .history-icon-div .log-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ebf7ff;
  color: #2a70ae;
  flex-direction: row;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
  margin: auto;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item .history-icon-div .log-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item .history-icon-div small {
  font-size: 10px;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item .history-info-div {
  display: flex;
  align-items: center;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item .history-info-div .causer-info {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item .history-info-div .causer-info h5 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #707d92;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item .history-info-div .causer-info span {
  color: #aeaeae;
  margin: 0;
  font-size: 10px;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item .history-info-div p {
  font-size: 10px;
  margin-bottom: 0;
}
.show-order-dashboard #orderHistory .card-body ul li .history-item {
  /*&:before {
    border-right: 1px dashed #999;
    content: "";
    position: absolute;
    left: 51px;
    top: -40px;
    transform: translateX(50%);
    width: 1px;
    z-index: 0;
    bottom: 20px;
    height: calc(100% - 40px);
  }*/
}
.show-order-dashboard #orderHistory .card-body ul li:first-of-type .history-item:before {
  display: none;
}
.show-order-dashboard #orderHistory .card-body ul li:last-of-type {
  border-bottom: none;
}
.show-order-dashboard .rtl #orderHistory .card-body ul li .history-item::before {
  left: initial;
  right: 51px;
}
.show-order-dashboard {
  /* للـ Chrome, Edge, Safari */
}
.show-order-dashboard .card-body ul::-webkit-scrollbar {
  width: 6px; /* العرض في الاتجاه العمودي */
  height: 6px; /* الارتفاع في الاتجاه الأفقي */
}
.show-order-dashboard .card-body ul::-webkit-scrollbar-thumb {
  background: #888; /* لون الـ thumb */
  border-radius: 10px;
}
.show-order-dashboard .card-body ul::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.show-order-dashboard .card-body ul::-webkit-scrollbar-track {
  background: #f1f1f1; /* الخلفية */
}
.show-order-dashboard {
  /* للـ Firefox */
}
.show-order-dashboard .card-body ul {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .card-body {
  padding: 15px 20px;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .panel-head {
  margin-bottom: 12px;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .panel-head h4 {
  margin-bottom: 4px;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .panel-head p {
  font-size: 13px;
  margin-bottom: 0;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step {
  flex: 1 1 140px;
  min-width: 120px;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-link:hover {
  text-decoration: none;
  background: #f3f4f6;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-label {
  font-size: 13px;
  line-height: 1.3;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-done .creation-step-link {
  border-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-done .creation-step-number {
  background: #10b981;
  color: #fff;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-current .creation-step-link {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1e3a8a;
}
.show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-current .creation-step-number {
  background: #2563eb;
  color: #fff;
}
.show-order-dashboard.create-order-dashboard .order-step-section {
  position: relative;
  transition: opacity 0.2s;
}
.show-order-dashboard.create-order-dashboard .order-step-section.step-locked {
  opacity: 0.55;
  pointer-events: none;
}
.show-order-dashboard.create-order-dashboard .order-step-section.step-locked .step-lock-badge {
  display: flex;
}
.show-order-dashboard.create-order-dashboard .delivery-method-card,
.show-order-dashboard.create-order-dashboard .activate-order-panel {
  position: relative;
}
.show-order-dashboard.create-order-dashboard .delivery-method-card.step-locked .step-lock-badge,
.show-order-dashboard.create-order-dashboard .activate-order-panel.step-locked .step-lock-badge {
  display: flex;
}
.show-order-dashboard.create-order-dashboard .step-lock-badge {
  display: none;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 12px;
  inset-inline-end: 15px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 2;
  pointer-events: auto;
  line-height: 1.4;
}
.show-order-dashboard.create-order-dashboard .delivery-method-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label {
  position: relative;
  flex: 1 1 150px;
  min-width: 130px;
  cursor: pointer;
  margin: 0;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label .delivery-method-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  color: #374151;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label .delivery-method-inner .method-name {
  flex: 1;
  font-size: 14px;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label .delivery-method-inner .method-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
  margin-inline-start: auto;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label .delivery-method-inner .method-check i {
  font-size: 9px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.1s;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label input[type=radio]:checked + .delivery-method-inner {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1e3a8a;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label input[type=radio]:checked + .delivery-method-inner .method-check {
  border-color: #2563eb;
  background: #2563eb;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label input[type=radio]:checked + .delivery-method-inner .method-check i {
  opacity: 1;
}
.show-order-dashboard.create-order-dashboard .delivery-method-label input[type=radio]:disabled + .delivery-method-inner {
  opacity: 0.6;
  cursor: not-allowed;
}
.show-order-dashboard.create-order-dashboard .activate-order-panel {
  border: 1px solid #a7f3d0 !important;
  border-inline-start: 4px solid #10b981 !important;
  border-radius: 10px;
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 65%);
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .card-body {
  padding: 20px 24px;
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .activate-layout {
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .activate-content form {
  display: flex;
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .activate-content h4 {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #065f46;
  margin-bottom: 5px;
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .activate-content p.text-muted {
  font-size: 13px;
  margin-bottom: 16px;
  color: #6b7280;
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .activate-icon-wrap {
  flex-shrink: 0;
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .activate-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
  font-size: 1rem;
  color: #fff;
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .btn-activate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #10b981;
  color: #fff;
  border: none;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .btn-activate:hover {
  background: #059669;
  color: #fff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}
.show-order-dashboard.create-order-dashboard .activate-order-panel .btn-activate:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
@media (max-width: 480px) {
  .show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-steps {
    gap: 6px;
  }
  .show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step {
    flex: 1 1 100%;
  }
  .show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-link {
    padding: 8px 10px;
    font-size: 13px;
  }
  .show-order-dashboard.create-order-dashboard .creation-steps-panel .creation-step-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .show-order-dashboard.create-order-dashboard .delivery-method-label .delivery-method-inner {
    padding: 10px 12px;
  }
  .show-order-dashboard.create-order-dashboard .activate-order-panel .card-body {
    padding: 16px 16px;
  }
  .show-order-dashboard.create-order-dashboard .activate-order-panel .activate-layout {
    gap: 14px;
  }
  .show-order-dashboard.create-order-dashboard .activate-order-panel .activate-icon {
    width: 46px;
    height: 46px;
    font-size: 0.875rem;
  }
  .show-order-dashboard.create-order-dashboard .activate-order-panel .activate-content h4 {
    font-size: 1.3rem;
  }
  .show-order-dashboard.create-order-dashboard .activate-order-panel .btn-activate {
    padding: 9px 20px;
    font-size: 13px;
  }
  .show-order-dashboard.create-order-dashboard .step-lock-badge {
    font-size: 11px;
    padding: 3px 8px;
  }
}
@media (max-width: 480px) {
  .show-order-dashboard {
    padding: 0;
  }
  .show-order-dashboard .order-styled-stack {
    gap: 10px;
  }
  .show-order-dashboard .order-styled-stack .order-status-data .status-data-container .form-group {
    margin-bottom: 0;
  }
  .show-order-dashboard .order-styled-stack .order-status-data .status-data-container .order-number span:first-of-type {
    display: none;
  }
  .show-order-dashboard .order-styled-stack .order-status-data .status-data-container li div, .show-order-dashboard .order-styled-stack .order-status-data .status-data-container li button {
    gap: 3px;
  }
  .show-order-dashboard .order-styled-stack .order-status-data .status-data-container li div span, .show-order-dashboard .order-styled-stack .order-status-data .status-data-container li button span {
    font-size: 11px;
  }
  .show-order-dashboard .order-styled-stack .d-flex-container {
    align-items: center;
    width: 100%;
  }
  .show-order-dashboard .order-styled-stack .d-flex-container .assigned-employee .employee {
    width: 30px;
    height: 30px;
  }
  .show-order-dashboard .order-styled-stack .d-flex-container .assigned-employee button {
    padding: 0 8px;
    height: 35px;
  }
  .show-order-dashboard .order-styled-stack .d-flex-container .assigned-employee button span {
    font-size: 11px;
  }
  .show-order-dashboard .card, .show-order-dashboard #shippingState {
    margin-bottom: 10px;
  }
  .show-order-dashboard .card .card-body, .show-order-dashboard #shippingState .card-body {
    overflow: initial;
    padding: 15px;
  }
  .show-order-dashboard .card .card-body .card-head .card-title, .show-order-dashboard #shippingState .card-body .card-head .card-title {
    font-size: 0.875rem;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card, .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card {
    padding: 10px 7px;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container, .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container {
    gap: 10px;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-image-section, .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-image-section {
    width: 50px;
    height: 50px;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section, .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section {
    flex: initial;
    width: calc(100% - 65px);
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section h5, .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section h5 {
    font-size: 14px;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section h5 a, .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section h5 a {
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row, .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-gap: 5px;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row > div, .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row > div {
    box-sizing: border-box;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row > div:nth-of-type(1), .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row > div:nth-of-type(1) {
    grid-column: 1;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row > div:nth-of-type(2), .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row > div:nth-of-type(2) {
    grid-column: 2;
  }
  .show-order-dashboard .card .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row > div:nth-of-type(3), .show-order-dashboard #shippingState .card-body .order-items-container .order-items-list .order-item-card .item-card-container .item-details-section .item-pricing-section .pricing-row > div:nth-of-type(3) {
    grid-column: 1/span 2;
  }
  .show-order-dashboard .card .card-body .shipping-container .shipping-content, .show-order-dashboard #shippingState .card-body .shipping-container .shipping-content {
    padding: 0;
  }
  .show-order-dashboard .card .card-body .shipping-container .shipping-content .company-info .company-main, .show-order-dashboard #shippingState .card-body .shipping-container .shipping-content .company-info .company-main {
    gap: 5px;
  }
  .show-order-dashboard .card .card-body .shipping-container .shipping-content .company-info .company-main .company-details, .show-order-dashboard #shippingState .card-body .shipping-container .shipping-content .company-info .company-main .company-details {
    gap: 5px;
  }
  .show-order-dashboard .card .card-body .shipping-container .shipping-content .company-info .company-main .company-details .company-logo, .show-order-dashboard #shippingState .card-body .shipping-container .shipping-content .company-info .company-main .company-details .company-logo {
    width: 40px;
    height: 40px;
  }
  .show-order-dashboard .card .card-body .shipping-container .shipping-content .company-info .company-main .company-details .company-text .company-name, .show-order-dashboard #shippingState .card-body .shipping-container .shipping-content .company-info .company-main .company-details .company-text .company-name {
    font-size: 0.9375rem;
  }
  .show-order-dashboard .card .card-body .shipping-container .shipping-content .company-info .shipping-address, .show-order-dashboard #shippingState .card-body .shipping-container .shipping-content .company-info .shipping-address {
    padding: 7px;
  }
  .show-order-dashboard .card .card-body .shipping-container .shipping-content .company-info .shipping-address .address-label, .show-order-dashboard #shippingState .card-body .shipping-container .shipping-content .company-info .shipping-address .address-label {
    font-size: 0.7rem;
    margin-bottom: 0;
  }
  .show-order-dashboard .card .card-body .shipping-container .shipping-content .company-info .shipping-address .address-text, .show-order-dashboard #shippingState .card-body .shipping-container .shipping-content .company-info .shipping-address .address-text {
    line-height: 1.4;
    font-size: 0.85rem;
  }
  .show-order-dashboard .card .card-body .shipping-container .shipping-content .order-contact-note, .show-order-dashboard #shippingState .card-body .shipping-container .shipping-content .order-contact-note {
    font-size: 13px;
    gap: 0;
  }
  .show-order-dashboard .card .card-body #shippingCompanyFounded .shipping-icon-container img, .show-order-dashboard #shippingState .card-body #shippingCompanyFounded .shipping-icon-container img {
    width: 80%;
  }
}

/* start sales / CRM module style */
.sales-profile-grid,
.sales-interaction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block-end: 16px;
}
@media (max-width: 991px) {
  .sales-profile-grid,
  .sales-interaction-grid {
    grid-template-columns: 1fr;
  }
}

.sales-defs {
  margin: 0;
}
.sales-defs .sales-def {
  display: flex;
  gap: 10px;
  padding-block: 8px;
  border-block-end: 1px solid #eef1f4;
}
.sales-defs .sales-def:last-child {
  border-block-end: 0;
}
.sales-defs .sales-def dt {
  flex: 0 0 130px;
  color: #6c757d;
  font-weight: 600;
}
.sales-defs .sales-def dd {
  margin: 0;
}

.sales-tags {
  margin-block-start: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sales-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sales-timeline .sales-timeline-item {
  position: relative;
  padding-inline-start: 18px;
  padding-block: 10px;
  border-inline-start: 2px solid #e6eaef;
}
.sales-timeline .sales-timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -6px;
  inset-block-start: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #348fe2;
}
.sales-timeline .sales-timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-end: 4px;
}
.sales-timeline .sales-timeline-date {
  font-weight: 600;
}
.sales-timeline .sales-created-at {
  display: inline-block;
  margin-inline-start: 5px;
  font-size: 11px;
}
.sales-timeline .sales-timeline-user {
  color: #6c757d;
}
.sales-timeline .sales-timeline-body {
  margin-block: 4px;
  color: #33383e;
  white-space: pre-line;
}
.sales-timeline .sales-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sales-playbook-panel {
  margin-block-start: 8px;
  border: 1px solid rgba(247, 151, 55, 0.35);
  border-radius: 12px;
  background: rgba(247, 151, 55, 0.06);
  padding: 12px;
}
.sales-playbook-panel .sales-playbook-item + .sales-playbook-item {
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px dashed rgba(247, 151, 55, 0.35);
}
.sales-playbook-panel .sales-playbook-block {
  margin-block-start: 6px;
}
.sales-playbook-panel .sales-playbook-block em {
  display: block;
  color: #F79737;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
}
.sales-playbook-panel .sales-playbook-block p {
  margin: 2px 0 0;
  white-space: pre-line;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-block-end: 16px;
}
@media (max-width: 991px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

.dh-card__title {
  font-weight: 700;
  margin-block-end: 12px;
  color: #2d353c;
}

.sales-report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-block-start: 6px;
}

.sales-insights > .dh-card {
  margin-block-end: 16px;
}

.sales-insights-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block-end: 16px;
}
@media (max-width: 991px) {
  .sales-insights-charts {
    grid-template-columns: 1fr;
  }
}

.sales-chart {
  position: relative;
  height: 280px;
  padding-block: 14px;
}

.pe-card-head--toggle {
  cursor: pointer;
  transition: background 0.15s ease;
}
.pe-card-head--toggle .pe-card-caret {
  margin-inline-start: auto;
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 143, 226, 0.1);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.15s ease;
}
.pe-card-head--toggle .pe-card-caret::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #348fe2;
}
.pe-card-head--toggle:hover .pe-card-caret {
  background: rgba(52, 143, 226, 0.18);
}
.pe-card-head--toggle:not(.collapsed) .pe-card-caret {
  transform: rotate(180deg);
}

.kpi-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block-end: 16px;
}
@media (max-width: 991px) {
  .kpi-pair {
    grid-template-columns: 1fr;
  }
}

.kpi-tabs {
  border-bottom: 1px solid #e6edf3;
  margin-block-end: 4px;
}
.kpi-tabs .nav-tabs {
  border-bottom: 0;
  gap: 4px;
  flex-wrap: wrap;
}
.kpi-tabs .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #939393;
  background: transparent;
  transition: color 0.15s, border-color 0.15s;
}
.kpi-tabs .nav-link:hover {
  color: #2d353c;
}
.kpi-tabs .nav-link.active {
  color: #348fe2;
  border-bottom-color: #348fe2;
  background: transparent;
}

.col-name .sales-name-row {
  display: block;
}
.col-name .sales-created-at {
  display: block;
  margin-inline-start: 0;
  margin-block-start: 3px;
  font-size: 11px;
}

.kpi-hint {
  display: inline-block;
  margin-inline-start: 6px;
  vertical-align: middle;
}
.kpi-hint__toggle {
  cursor: pointer;
  list-style: none;
  color: #348fe2;
  font-size: 13px;
  line-height: 1;
}
.kpi-hint__toggle::-webkit-details-marker {
  display: none;
}
.kpi-hint__toggle::marker {
  content: "";
}
.kpi-hint[open] {
  display: block;
  margin-inline-start: 0;
}
.kpi-hint__body {
  margin-block-start: 6px;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 400;
  color: #55606a;
}
.kpi-hint__body .text-warning {
  color: #b9770a !important;
}

.card-sales .header p.text-muted,
.kpi-tabs ~ .tab-content .text-muted {
  font-size: 13px;
}

.dh-hint {
  position: relative;
  display: inline-flex;
  margin-inline-start: 6px;
}
.dh-hint__toggle {
  cursor: pointer;
  list-style: none;
  color: #348fe2;
  font-size: 14px;
  line-height: 1;
}
.dh-hint__toggle::-webkit-details-marker {
  display: none;
}
.dh-hint__toggle::marker {
  content: "";
}
.dh-hint__pop {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 20;
  width: max-content;
  max-width: 360px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  color: #55606a;
  white-space: normal;
  text-align: start;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(45, 53, 60, 0.12);
}
.dh-hint__pop b {
  color: #2d353c;
}

.sales-profile small {
  font-size: 13px;
}

/* end sales / CRM module style */
/* start support module style (staff inbox + conversation view) */
.card-support .support-new-activity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  padding: 12px 15px;
  border-radius: 8px;
  background: rgba(52, 143, 226, 0.1);
  color: #348fe2;
  font-weight: 600;
}
.card-support .support-new-activity .btn {
  margin-inline-start: auto;
}
.card-support .support-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #348fe2;
  margin-inline-end: 6px;
}
.card-support tr.support-unread td {
  font-weight: 600;
}

.support-conversation-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 991px) {
  .support-conversation-grid {
    grid-template-columns: 1fr;
  }
}

.support-thread {
  max-height: 55vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block-end: 12px;
}

.support-message {
  max-width: 85%;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f2f6fa;
  align-self: flex-start;
}
.support-message.support-message--admin, .support-message.support-message--assistant {
  background: #e8f2fd;
  align-self: flex-end;
}
.support-message.support-message--private {
  background: #fdf6e3;
  border: 1px dashed #e5c15c;
}
.support-message .support-message-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 4px;
  font-size: 12px;
  color: #737373;
}
.support-message .support-message-head .support-message-sender {
  font-weight: 600;
  color: #37414b;
}
.support-message .support-message-body {
  white-space: pre-line;
  word-break: break-word;
}

.support-composer {
  border-block-start: 1px solid #e6edf3;
  padding-block-start: 12px;
}
.support-composer textarea {
  resize: vertical;
}
.support-composer .support-composer-modes {
  display: flex;
  gap: 6px;
  margin-block-end: 8px;
}
.support-composer.support-composer--note textarea {
  background: #fdf6e3;
  border-color: #e5c15c;
}
.support-composer .support-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-block-start: 8px;
}

.support-message-image {
  display: block;
  margin-block-start: 6px;
}
.support-message-image img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 8px;
}

.support-composer-image {
  display: flex;
  align-items: center;
  margin-block-start: 8px;
}
.support-composer-image .support-composer-image-frame {
  position: relative;
  display: inline-flex;
  line-height: 0;
}
.support-composer-image img {
  max-width: 90px;
  max-height: 90px;
  border-radius: 6px;
}
.support-composer-image .support-composer-image-clear {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.support-composer-image .support-composer-image-clear:hover {
  background: rgba(0, 0, 0, 0.75);
}

.support-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-end: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #eef1f4;
  font-size: 12px;
  white-space: nowrap;
}
.support-tag .support-tag-remove {
  border: 0;
  background: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}
.support-tag .support-tag-remove:hover {
  opacity: 1;
}

.support-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.support-saved-replies {
  border: 1px solid #e6edf3;
  border-radius: 8px;
  padding: 8px;
  margin-block-start: 8px;
}
.support-saved-replies .support-saved-reply-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.support-saved-replies .support-saved-reply {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.support-saved-replies .support-saved-reply:hover {
  background: #f2f6fa;
}
.support-saved-replies .support-saved-reply .support-saved-reply-category {
  color: #737373;
  font-size: 12px;
}

.support-defs {
  margin: 0;
}
.support-defs .support-def {
  display: flex;
  gap: 10px;
  padding-block: 8px;
  border-block-end: 1px solid #eef1f4;
}
.support-defs .support-def:last-child {
  border-block-end: 0;
}
.support-defs .support-def dt {
  flex: 0 0 120px;
  color: #737373;
  font-weight: 400;
}
.support-defs .support-def dd {
  margin: 0;
  word-break: break-word;
}

.support-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.support-timeline li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-block: 6px;
  border-block-end: 1px solid #eef1f4;
}
.support-timeline li:last-child {
  border-block-end: 0;
}
.support-timeline li .support-timeline-date {
  color: #737373;
  font-size: 12px;
  white-space: nowrap;
}

/* end support module style */
.pe-edit.feature-show:has(.vrobo-connect) .pe-card-head, .pe-edit.feature-show:has(.vrobo-connect) .fs-description, .pe-edit.feature-show:has(.vrobo-connect) .fs-divider {
  display: none;
}
.pe-edit.feature-show:has(.vrobo-connect) .pe-actionbar-title {
  display: none;
}
.pe-edit.feature-show:has(.vrobo-connect) .pe-status {
  display: none;
}
.pe-edit.feature-show:has(.vrobo-connect) .fs-card {
  max-width: 860px;
}
.pe-edit.feature-show:has(.vrobo-connect) .pe-card-body {
  padding: 0;
}
.pe-edit.feature-show .vc-form {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.pe-edit.feature-show .vc-aside {
  flex: 0 0 36%;
  min-width: 220px;
  padding: 26px 22px;
  background: linear-gradient(160deg, #f5f3ff, #fbfaff);
  border-inline-start: 1px solid #e6edf3;
  display: flex;
  flex-direction: column;
}
.pe-edit.feature-show .vc-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pe-edit.feature-show .vc-head .vc-badge {
  margin-top: 0;
}
.pe-edit.feature-show .vc-logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 25px;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3);
}
.pe-edit.feature-show .vc-title {
  font-size: 16px;
  font-weight: 700;
  color: #2d353c;
  margin: 14px 0 0;
}
.pe-edit.feature-show .vc-desc {
  font-size: 12.5px;
  color: #939393;
  line-height: 1.7;
  margin: 6px 0 0;
}
.pe-edit.feature-show .vc-tags {
  margin-top: 12px;
}
.pe-edit.feature-show .vc-tag {
  display: inline-block;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  margin: 0 0 6px 6px;
}
.pe-edit.feature-show .vc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}
.pe-edit.feature-show .vc-badge.is-on {
  background: #dcfce7;
  color: #166534;
}
.pe-edit.feature-show .vc-badge.is-paused {
  background: #fef3c7;
  color: #92400e;
}
.pe-edit.feature-show .vc-badge.is-off {
  background: #f1f5f9;
  color: #64748b;
}
.pe-edit.feature-show .vc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.pe-edit.feature-show .vc-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #ece9f5;
}
.pe-edit.feature-show .vc-control .vc-control-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #939393;
}
.pe-edit.feature-show .vc-main {
  flex: 1;
  min-width: 280px;
  padding: 26px 22px;
}
.pe-edit.feature-show .vc-step {
  display: flex;
  gap: 13px;
}
.pe-edit.feature-show .vc-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pe-edit.feature-show .vc-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #348fe2;
}
.pe-edit.feature-show .vc-num.is-done {
  background: #16a34a;
}
.pe-edit.feature-show .vc-line {
  flex: 1;
  width: 2px;
  margin: 5px auto;
  background: #e6edf3;
}
.pe-edit.feature-show .vc-field {
  flex: 1;
  padding-bottom: 20px;
}
.pe-edit.feature-show .vc-step:last-of-type .vc-field {
  padding-bottom: 0;
}
.pe-edit.feature-show .vc-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2d353c;
  margin-bottom: 8px;
}
.pe-edit.feature-show .vc-hint {
  display: block;
  font-size: 11.5px;
  color: #939393;
  line-height: 1.6;
  margin-top: 7px;
}
.pe-edit.feature-show .vc-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6d28d9;
  background: #fff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.pe-edit.feature-show .vc-link i {
  font-size: 11px;
}
.pe-edit.feature-show .vc-link:hover {
  background: #f5f3ff;
  border-color: #6d28d9;
}
.pe-edit.feature-show .vc-field .vc-link + .form-control {
  margin-top: 12px;
}
.pe-edit.feature-show .vc-actions {
  margin-top: 22px;
}
.pe-edit.feature-show .vrobo-connect.is-connected .vc-line {
  background: #bbf7d0;
}
@media (max-width: 767px) {
  .pe-edit.feature-show .vc-aside {
    flex: 0 0 100%;
    border-inline-start: 0;
    border-bottom: 1px solid #e6edf3;
  }
  .pe-edit.feature-show .vc-main {
    flex: 0 0 100%;
  }
}

.taxonomy-column {
  position: relative;
}

.card-orders .menu-list > li {
  border-bottom: 1px solid #f3f3f3;
}
.card-orders .menu-list > li .categories-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.5rem;
}
.card-orders .menu-list > li .categories-container .address {
  flex: 1;
  min-width: 0;
}
.card-orders .menu-list .items-delete {
  margin-top: 0.4rem;
}
.card-orders .menu-list .items-delete i.fa-trash {
  margin-right: 0.35rem;
}

/*!========================================================================
* File: bootstrap-iconpicker.css v1.10.0 by @victor-valencia
* https://victor-valencia.github.com/bootstrap-iconpicker
* ========================================================================
* Copyright 2013-2018 Victor Valencia Rico.
* Licensed under MIT license.
* https://github.com/victor-valencia/bootstrap-iconpicker/blob/master/LICENSE
* ========================================================================
*/
.iconpicker .caret {
  margin-right: 10px !important;
}

.iconpicker {
  min-width: 60px;
}

.iconpicker input.search-control {
  margin-bottom: 6px;
  margin-top: 6px;
}

div.iconpicker.left .table-icons {
  margin-right: auto;
}

div.iconpicker.center .table-icons {
  margin-left: auto;
  margin-right: auto;
}

div.iconpicker.right .table-icons {
  margin-left: auto;
}

.table-icons {
  direction: ltr;
}

.table-icons .btn {
  min-height: 30px;
  min-width: 35px;
  text-align: center;
  padding: 0;
  margin: 2px;
  border-radius: 4px;
  transition: background 0.35s cubic-bezier(0.2, 1, 0.3, 1);
  display: inline-block;
  font-weight: 400;
  background: #fcfcfc;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.5384616;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.table-icons .btn:hover {
  box-shadow: none !important;
  border-color: rgba(51, 51, 51, 0.28);
}
.table-icons .btn.btn-default {
  border-color: #eee;
}
.table-icons .btn.btn-primary {
  background: #fff;
  border: 1px solid #eee;
  color: #333;
  font-size: 11px;
}

.btn-icon {
  background: #eee;
  border: #333;
}

.btn-icon-selected {
  background: rgba(52, 143, 226, 0.45) !important;
  color: #333;
}

.table-icons td {
  min-width: 39px;
}

.popover {
  max-width: inherit !important;
}

.iconpicker-popover {
  z-index: 1050 !important;
}

.iconpicker-popover .search-control {
  margin-bottom: 6px;
  margin-top: 6px;
}

.cat-sortable {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.cat-sortable .cat-list {
  width: 100%;
  margin-bottom: 15px;
}
.cat-sortable .cat-list .wrappers {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 3px;
  padding: 2px 0;
  position: relative;
  transition: ease-in-out 0.35s;
}
.cat-sortable .cat-list .wrappers .cat-right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1 1 0;
}
.cat-sortable .cat-list .wrappers .cat-right .hand {
  display: block;
  cursor: pointer;
  flex: auto;
  border-left: 1px solid #eee;
}
.cat-sortable .cat-list .wrappers .cat-right .hand i {
  font-size: 18px;
  color: #8d8b8b;
  cursor: pointer;
  display: block;
  margin: 0 13px;
}
.cat-sortable .cat-list .wrappers .cat-right .cat-icon .btn {
  background-color: transparent;
  margin-right: 3px;
  border: none;
  transition: background 0.35s cubic-bezier(0.2, 1, 0.3, 1);
  min-width: 60px;
  box-shadow: none;
}
.cat-sortable .cat-list .wrappers .cat-right .cat-icon .btn .caret {
  margin-right: 10px;
}
.cat-sortable .cat-list .wrappers .cat-right .cat-icon .btn:hover, .cat-sortable .cat-list .wrappers .cat-right .cat-icon .btn:focus {
  outline: 0;
}
.cat-sortable .cat-list .wrappers .cat-right .cat-name {
  width: 100%;
}
.cat-sortable .cat-list .wrappers .cat-right .cat-name .input-group {
  width: 100%;
  border: 0;
}
.cat-sortable .cat-list .wrappers .cat-right .cat-name .input-group .form-control {
  border: 0;
}
.cat-sortable .cat-list .wrappers .cat-left {
  display: flex;
}
.cat-sortable .cat-list .wrappers .cat-left .cat-option {
  min-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cat-sortable .cat-list .wrappers .cat-left .cat-option .dropdown-toggle {
  cursor: pointer;
  padding: 10px;
}
.cat-sortable .cat-list .wrappers .cat-left .cat-option .dropdown-toggle i {
  color: #444;
}
.cat-sortable .cat-list .wrappers .cat-left .cat-option .dropdown-menu {
  right: auto;
  left: 0;
}
.cat-sortable .cat-list .wrappers .cat-left .cat-option .dropdown-menu li {
  width: 100%;
}
.cat-sortable .cat-list .wrappers .cat-left .cat-option .dropdown-menu li a {
  font-size: 13px;
  color: #333;
  padding: 8px 15px;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.5;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 10px;
}
.cat-sortable .cat-list .wrappers .cat-left .cat-option .dropdown-menu li:nth-last-child(-n+2) a {
  color: #cc4946;
}
.cat-sortable .cat-list .wrappers:hover, .cat-sortable .cat-list .wrappers:focus {
  border-color: rgba(52, 143, 226, 0.45);
  transition: ease-in-out 0.35s;
}

.table_category .table_head,
.table_category .table_body {
  display: flex;
  justify-content: space-between;
}
.table_category .table_head .item,
.table_category .table_body .item {
  height: 30px;
  text-align: center;
  flex: 1 1 0px;
}
.table_category .table_head .item:first-child,
.table_category .table_body .item:first-child {
  flex-grow: 6;
  text-align: right;
}
.table_category .table_body {
  border: 1px solid rgba(0, 0, 0, 0.5019607843);
  border-radius: 8px;
  margin: 10px 0;
}

.menu-box {
  border: 1px solid #EEEEEE;
  border-radius: 5px;
  padding: 15px;
  background: #ffffff;
}

.menu-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-box ul.menu-list li {
  display: block;
  margin-bottom: 5px;
  position: relative;
}
.menu-box ul.menu-list li > div {
  border: 1px solid #eee;
  border-radius: 5px;
  position: relative;
}
.menu-box ul.menu-list li:before {
  background: #eee;
  content: "";
  height: calc(100% - 60px);
  position: absolute;
  right: 20px;
  top: 45px;
  width: 1px;
}

.menu-box ul.menu-list > li a {
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
}

.menu-box ul.menu-list > li a:hover {
  cursor: pointer;
}

.menu-box ul.menu-list ul {
  margin-right: 30px;
  margin-top: 5px;
}
.menu-box ul.menu-list ul li {
  position: relative;
}
.menu-box ul.menu-list ul li:before {
  background-color: #eee;
  content: "";
  height: 1px;
  position: absolute;
  right: -10px;
  top: 29px;
  width: 11px;
}
.menu-box ul.menu-list ul li > ul li {
  position: relative;
}
.menu-box ul.menu-list ul li > ul li:before {
  background-color: #eee;
  content: "";
  height: 1px;
  position: absolute;
  right: -40px;
  top: 29px;
  width: 40px;
}

.menu-box ul.menu-list ul li > div:before {
  background: red;
  content: "";
  height: calc(100% - 65px);
  position: absolute;
  right: 20px;
  top: 47px;
  width: 1px;
}

.menu-box li.menu-highlight {
  border: 1px dashed red !important;
  background: #f5f5f5;
}

.categories-container {
  display: grid;
  grid-template-columns: 50px auto 100px 100px 100px;
  grid-gap: 0;
  align-items: center;
}
.categories-container > div {
  padding: 0 10px;
}
.categories-container .hand {
  border-left: 1px solid #eeeeee;
  text-align: center;
}
.categories-container .dropdown-menu {
  left: 0;
  right: inherit;
}
.categories-container .dropdown-menu li a,
.categories-container .dropdown-menu li button {
  display: block;
  float: right;
  width: 100%;
  text-align: right;
  margin: 0 !important;
}
.categories-container .dropdown-menu li a svg,
.categories-container .dropdown-menu li button svg {
  margin-left: 10px;
}
.categories-container .dropdown-menu li a:hover, .categories-container .dropdown-menu li a:focus,
.categories-container .dropdown-menu li button:hover,
.categories-container .dropdown-menu li button:focus {
  background-color: #edf0f5;
}

.pad-15 {
  padding: 15px;
}

@media (max-width: 768px) {
  .categories-container {
    grid-template-columns: repeat(6, auto);
  }
  .categories-container .address {
    min-width: 230px;
  }
  category_list_content {
    overflow-y: scroll;
  }
  .menu-list li .submenu-list li .categories-container .address {
    min-width: 200px !important;
  }
}
@media (max-width: 567px) {
  .categories-container {
    grid-template-columns: repeat(6, auto);
    /*overflow-y: scroll;
    -ms-overflow-style: none; !* Internet Explorer 10+ *!
    scrollbar-width: none; !* Firefox *!
    &::-webkit-scrollbar {
      display: none;
    }*/
  }
  .categories-container .address {
    min-width: 170px;
  }
  .menu-list li .submenu-list li .categories-container .address {
    min-width: 140px !important;
  }
}
/*!========================================================================
* File: bootstrap-iconpicker.css v1.10.0 by @victor-valencia
* https://victor-valencia.github.com/bootstrap-iconpicker
* ========================================================================
* Copyright 2013-2018 Victor Valencia Rico.
* Licensed under MIT license.
* https://github.com/victor-valencia/bootstrap-iconpicker/blob/master/LICENSE
* ========================================================================
*/
.iconpicker .caret {
  margin-right: 10px !important;
}

.iconpicker {
  min-width: 60px;
}

.iconpicker input.search-control {
  margin-bottom: 6px;
  margin-top: 6px;
}

div.iconpicker.left .table-icons {
  margin-right: auto;
}

div.iconpicker.center .table-icons {
  margin-left: auto;
  margin-right: auto;
}

div.iconpicker.right .table-icons {
  margin-left: auto;
}

.table-icons {
  direction: ltr;
}
.table-icons .btn {
  min-height: 30px;
  min-width: 35px;
  text-align: center;
  padding: 0;
  margin: 2px;
  border-radius: 4px;
  transition: background 0.35s cubic-bezier(0.2, 1, 0.3, 1);
  font-weight: 400;
  background: #fcfcfc;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.5384616;
  user-select: none;
  color: #1a2229;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-icons .btn:hover {
  box-shadow: none !important;
  border-color: rgba(51, 51, 51, 0.28);
}
.table-icons .btn.btn-default {
  border-color: #eee;
}
.table-icons .btn span {
  height: auto;
  padding: 0;
  margin: 0;
}
.table-icons .btn-arrow {
  background-color: #348fe2 !important;
  color: #fff !important;
  border-radius: 5px;
}

.btn-icon {
  background: #eee;
  border: #333;
}

/*.btn.btn-primary{
  background: #fff;
  border: 1px solid #eee;
  color: #333;
  font-size: 11px;
}*/
.btn-icon-selected {
  background: rgba(52, 143, 226, 0.45) !important;
  color: #333;
}

.table-icons td {
  min-width: 39px;
}

.popover {
  max-width: inherit !important;
}

.iconpicker-popover {
  z-index: 1050 !important;
}

.iconpicker-popover .search-control {
  margin-bottom: 6px;
  margin-top: 6px;
}

.finance_module .btn {
  float: none;
}

:root {
  --primary: #348fe2;
  --primary-light: #e0e7ff;
  --primary-dark: #316699;
  --secondary: #0ea5e9;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #64748b;
  --gray-light: #e2e8f0;
  --gray-lighter: #f1f5f9;
  --border-radius: 16px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s ease;
}

#content {
  /* Header */
}
#content .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding: 0 0 10px 0;
}
#content .header .page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 15px;
}
#content .header .page-subtitle {
  font-size: 14px;
  color: var(--gray);
  max-width: 600px;
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 0;
}
#content {
  /* Stats */
}
#content .stats-container {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
#content .stats-container .stat-card {
  /*background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 20px;*/
  display: flex;
  align-items: center;
  gap: 6px;
  /*min-width: 300px;*/
}
#content .stats-container .stat-card .stat-icon {
  /*width: 50px;
  height: 50px;
  border-radius: 50%;*/
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 16px;
}
#content .stats-container .stat-card .stat-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
#content .stats-container .stat-card .stat-content .stat-title {
  font-size: 13px;
  color: var(--gray);
}
#content .stats-container .stat-card .stat-content .stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
}
#content .line-brake {
  border-color: #cbd2da;
}

.refactor-wallets {
  /* Wallets Grid */
}
.refactor-wallets .wallets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}
.refactor-wallets .wallets-grid .wallet-card {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: none;
  padding: 20px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  position: relative;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-header .wallet-info {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-header .wallet-info .wallet-title {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-header .wallet-info .wallet-title .wallet-icon {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f9ff;
  color: #316699;
  font-size: 16px;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-header .wallet-info .wallet-tooltip {
  background: var(--dark);
  color: white;
  padding: 0;
  border-radius: 20px;
  cursor: help;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-header .wallet-info .wallet-tooltip i, .refactor-wallets .wallets-grid .wallet-card .wallet-header .wallet-info .wallet-tooltip svg {
  font-size: 8px;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container {
  margin-bottom: 15px;
  padding: 20px;
  background: #f4f9ff;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container .balance-label {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container .wallet-balance {
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  display: flex;
  align-items: center;
  direction: ltr;
  justify-content: end;
  gap: 5px;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container .balance_info {
  gap: 5px;
  display: flex;
  flex-flow: column;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container .balance_info .balance-label {
  font-size: 11px;
  gap: 2px;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container .balance_info .wallet-balance {
  font-size: 14px;
  font-weight: 600;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container {
  /* Empty State */
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #394556;
  min-height: 155px;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container.empty-state i {
  font-size: 45px;
  margin-bottom: 15px;
  color: #909bab;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-balance-container.empty-state p {
  margin-bottom: 0;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}
.refactor-wallets .wallets-grid .wallet-card .wallet-actions .btn {
  height: 40px;
  border-radius: 7px;
  font-weight: 600;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 10px;
}
.refactor-wallets .wallets-grid .wallet-card .transactions-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #1b76bf;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
  padding: 10px;
  border-radius: 8px;
}
.refactor-wallets .wallets-grid .wallet-card .transactions-link:hover {
  background-color: #e9f6ff;
}
.refactor-wallets .wallets-grid .wallet-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.refactor-wallets .wallets-grid .wallet-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}
.refactor-wallets .btn-primary {
  background-color: var(--primary);
  color: white;
}
.refactor-wallets .btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
}
.refactor-wallets .btn-outline {
  background-color: white;
  color: #316699;
  border: 1px solid #316699;
}
.refactor-wallets .btn-outline:hover {
  background-color: #348fe2;
  border-color: #348fe2;
  color: #fff;
  transform: translateY(-2px);
}
.refactor-wallets .btn-success {
  background-color: #ecfff4;
  color: #2e8e34;
  border: 1px solid #87ba9e;
}
.refactor-wallets .btn-success:hover {
  background-color: #0d9e6d;
  border-color: #0d9e6d;
  color: #fff;
  transform: translateY(-2px);
}
.refactor-wallets .btn-disabled {
  background-color: var(--gray-light);
  color: var(--gray);
  cursor: not-allowed;
  opacity: 0.7;
}
.refactor-wallets {
  /* Toast Notification */
}
.refactor-wallets .toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--success);
  color: white;
  padding: 18px 28px;
  border-radius: 12px;
  display: none;
  z-index: 2000;
  align-items: center;
  gap: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  animation: toastIn 0.4s ease;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.refactor-wallets .toast-error {
  background: var(--danger);
}
.refactor-wallets .toast-warning {
  background: var(--warning);
}
.refactor-wallets .toast i {
  font-size: 22px;
}
.refactor-wallets {
  /* Responsive */
}
@media (max-width: 768px) {
  .refactor-wallets .wallets-grid {
    grid-template-columns: 1fr;
  }
  .refactor-wallets .modal-content {
    max-width: 95%;
  }
  .refactor-wallets .wallet-actions {
    flex-direction: column;
  }
  .refactor-wallets .stats-container {
    flex-direction: column;
    gap: 15px;
  }
  .refactor-wallets .stat-card {
    width: 100%;
  }
  .refactor-wallets .withdrawal-method {
    flex-direction: column;
  }
}
.refactor-wallets #bank-account-modal .view-section, .refactor-wallets #bank-account-modal .edit-section,
.refactor-wallets #withdrawal-settings-modal .view-section,
.refactor-wallets #withdrawal-settings-modal .edit-section {
  width: 100%;
}
.refactor-wallets #bank-account-modal .view-section .bank-account-section, .refactor-wallets #bank-account-modal .edit-section .bank-account-section,
.refactor-wallets #withdrawal-settings-modal .view-section .bank-account-section,
.refactor-wallets #withdrawal-settings-modal .edit-section .bank-account-section {
  background-color: #f5fcff;
  border-radius: 7px;
  padding: 15px;
  margin-top: 0;
  border: 1px solid var(--gray-light);
}
.refactor-wallets #bank-account-modal .view-section .bank-account-section .bank-account-header, .refactor-wallets #bank-account-modal .edit-section .bank-account-section .bank-account-header,
.refactor-wallets #withdrawal-settings-modal .view-section .bank-account-section .bank-account-header,
.refactor-wallets #withdrawal-settings-modal .edit-section .bank-account-section .bank-account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.refactor-wallets #bank-account-modal .view-section .bank-account-section .bank-account-header .bank-account-title, .refactor-wallets #bank-account-modal .edit-section .bank-account-section .bank-account-header .bank-account-title,
.refactor-wallets #withdrawal-settings-modal .view-section .bank-account-section .bank-account-header .bank-account-title,
.refactor-wallets #withdrawal-settings-modal .edit-section .bank-account-section .bank-account-header .bank-account-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.refactor-wallets #bank-account-modal .view-section .bank-account-section .bank-account-header .edit-bank-btn, .refactor-wallets #bank-account-modal .edit-section .bank-account-section .bank-account-header .edit-bank-btn,
.refactor-wallets #withdrawal-settings-modal .view-section .bank-account-section .bank-account-header .edit-bank-btn,
.refactor-wallets #withdrawal-settings-modal .edit-section .bank-account-section .bank-account-header .edit-bank-btn {
  background-color: transparent;
  width: auto;
  flex: initial;
  color: #333;
  font-weight: bold;
  padding: 0;
  font-size: 14px;
}
.refactor-wallets #bank-account-modal .view-section .bank-account-section .bank-info, .refactor-wallets #bank-account-modal .edit-section .bank-account-section .bank-info,
.refactor-wallets #withdrawal-settings-modal .view-section .bank-account-section .bank-info,
.refactor-wallets #withdrawal-settings-modal .edit-section .bank-account-section .bank-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e7ebf2;
  font-weight: 600;
  color: #424e59;
  font-size: 14px;
}
.refactor-wallets #bank-account-modal .view-section .bank-account-section .bank-info:last-child, .refactor-wallets #bank-account-modal .edit-section .bank-account-section .bank-info:last-child,
.refactor-wallets #withdrawal-settings-modal .view-section .bank-account-section .bank-info:last-child,
.refactor-wallets #withdrawal-settings-modal .edit-section .bank-account-section .bank-info:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.refactor-wallets #bank-account-modal .modal-dialog .modal-content .edit-btn-footer,
.refactor-wallets #withdrawal-settings-modal .modal-dialog .modal-content .edit-btn-footer {
  display: flex;
  align-items: center;
  gap: 15px;
}
.refactor-wallets #bank-account-modal .modal-dialog .modal-content .edit-btn-footer button, .refactor-wallets #bank-account-modal .modal-dialog .modal-content .edit-btn-footer a,
.refactor-wallets #withdrawal-settings-modal .modal-dialog .modal-content .edit-btn-footer button,
.refactor-wallets #withdrawal-settings-modal .modal-dialog .modal-content .edit-btn-footer a {
  flex: 1;
}
.refactor-wallets #bank-account-modal .modal-dialog .modal-footer .btn.btn-default,
.refactor-wallets #withdrawal-settings-modal .modal-dialog .modal-footer .btn.btn-default {
  padding: 0 22px;
  border-radius: 7px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 10px;
  font-size: 15px;
  border: none;
  box-shadow: none;
}
.refactor-wallets .edit-section {
  display: none;
}
.refactor-wallets .view-section {
  display: block;
}
.refactor-wallets #withdrawal-settings-modal .modal-body {
  padding: 20px;
}
.refactor-wallets #withdrawal-settings-modal .modal-body .method-content {
  display: none;
}
.refactor-wallets #withdrawal-settings-modal .modal-body .method-content.active {
  display: block;
}
.refactor-wallets #withdrawal-settings-modal {
  /* Withdrawal Settings */
}
.refactor-wallets #withdrawal-settings-modal .withdrawal-method {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  background-color: #e6f3ff;
  padding: 10px;
  border-radius: 8px;
  flex-wrap: wrap;
}
.refactor-wallets #withdrawal-settings-modal .withdrawal-method .method-option {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 0;
}
.refactor-wallets #withdrawal-settings-modal .withdrawal-method .method-option.active {
  background-color: white;
  border-color: #e6f3ff;
}
.refactor-wallets #withdrawal-settings-modal .withdrawal-method .method-option.active .method-icon {
  color: #348fe2;
}
.refactor-wallets #withdrawal-settings-modal .withdrawal-method .method-option .method-icon {
  font-size: 18px;
  margin-bottom: 0;
  color: var(--gray);
}
.refactor-wallets #withdrawal-settings-modal .withdrawal-method .method-option .method-name {
  font-weight: 700;
  color: var(--dark);
}
.refactor-wallets #withdrawal-settings-modal .days-selection {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.refactor-wallets #withdrawal-settings-modal .days-selection p {
  margin-bottom: 0;
}
.refactor-wallets #withdrawal-settings-modal .days-selection .day-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--gray-light);
}
.refactor-wallets #withdrawal-settings-modal .days-selection .day-option input, .refactor-wallets #withdrawal-settings-modal .days-selection .day-option label {
  margin: 0;
}
.refactor-wallets #withdrawal-settings-modal .min-balance-note {
  background-color: #fffbeb;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  border-right: 4px solid var(--warning);
  color: #854d0e;
  text-align: start;
}
.refactor-wallets #deposit-modal .tabs, .refactor-wallets #withdrawalModal .tabs {
  display: flex;
  gap: 8px;
  background-color: #ebf5ff;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 15px;
}
.refactor-wallets #deposit-modal .tabs .tab, .refactor-wallets #withdrawalModal .tabs .tab {
  flex: 1;
  text-align: center;
  padding: 14px;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
}
.refactor-wallets #deposit-modal .tabs .tab.active, .refactor-wallets #withdrawalModal .tabs .tab.active {
  background-color: var(--primary);
  color: white;
  box-shadow: var(--shadow);
}
.refactor-wallets #deposit-modal .tab-content, .refactor-wallets #withdrawalModal .tab-content {
  display: none;
  padding: 0 15px;
  margin-bottom: initial;
}
.refactor-wallets #deposit-modal .tab-content.active, .refactor-wallets #withdrawalModal .tab-content.active {
  display: block;
}
.refactor-wallets #deposit-modal .tab-content, .refactor-wallets #withdrawalModal .tab-content {
  /* Image Upload Section */
}
.refactor-wallets #deposit-modal .tab-content .upload-section, .refactor-wallets #withdrawalModal .tab-content .upload-section {
  border: 2px dashed var(--gray-light);
  border-radius: 8px;
  padding: 5px 10px 15px;
  text-align: center;
  margin-bottom: 15px;
  transition: var(--transition);
  cursor: pointer;
}
.refactor-wallets #deposit-modal .tab-content .upload-section.active, .refactor-wallets #withdrawalModal .tab-content .upload-section.active {
  border-color: var(--primary);
  background-color: var(--primary-light);
  padding: 10px;
}
.refactor-wallets #deposit-modal .tab-content .upload-section .upload-icon, .refactor-wallets #withdrawalModal .tab-content .upload-section .upload-icon {
  font-size: 35px;
  color: var(--gray);
  margin-bottom: 0;
}
.refactor-wallets #deposit-modal .tab-content .upload-section .upload-text, .refactor-wallets #withdrawalModal .tab-content .upload-section .upload-text {
  margin-bottom: 0;
  color: var(--gray);
}
.refactor-wallets #deposit-modal .tab-content .upload-section .upload-btn, .refactor-wallets #withdrawalModal .tab-content .upload-section .upload-btn {
  background-color: var(--primary);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.refactor-wallets #deposit-modal .tab-content .upload-section .upload-btn:hover, .refactor-wallets #withdrawalModal .tab-content .upload-section .upload-btn:hover {
  background-color: var(--primary-dark);
}
.refactor-wallets #deposit-modal .tab-content .upload-section .file-input, .refactor-wallets #withdrawalModal .tab-content .upload-section .file-input {
  display: none;
}
.refactor-wallets #deposit-modal .tab-content .upload-section .image-preview, .refactor-wallets #withdrawalModal .tab-content .upload-section .image-preview {
  display: none;
  position: relative;
  margin-top: 20px;
  text-align: center;
}
.refactor-wallets #deposit-modal .tab-content .upload-section .image-preview img, .refactor-wallets #withdrawalModal .tab-content .upload-section .image-preview img {
  max-width: 100%;
  max-height: 150px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.refactor-wallets #deposit-modal .tab-content .upload-section .image-preview .image-actions, .refactor-wallets #withdrawalModal .tab-content .upload-section .image-preview .image-actions {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 10px;
}
.refactor-wallets #deposit-modal .tab-content .upload-section .image-preview .image-actions .image-action-btn, .refactor-wallets #withdrawalModal .tab-content .upload-section .image-preview .image-actions .image-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}
.refactor-wallets #deposit-modal .tab-content .upload-section .image-preview .image-actions .image-action-btn:hover, .refactor-wallets #withdrawalModal .tab-content .upload-section .image-preview .image-actions .image-action-btn:hover {
  transform: scale(1.1);
}
.refactor-wallets #deposit-modal .tab-content .upload-section .image-preview .image-actions .image-action-btn.delete, .refactor-wallets #withdrawalModal .tab-content .upload-section .image-preview .image-actions .image-action-btn.delete {
  color: var(--danger);
}
.refactor-wallets #deposit-modal .tab-content .upload-section .image-preview .image-actions .image-action-btn.replace, .refactor-wallets #withdrawalModal .tab-content .upload-section .image-preview .image-actions .image-action-btn.replace {
  color: var(--primary);
}
.refactor-wallets #deposit-modal .form-control, .refactor-wallets #withdrawalModal .form-control {
  border-radius: 8px;
  height: 40px;
}
.refactor-wallets #deposit-modal .bank-details, .refactor-wallets #withdrawalModal .bank-details {
  margin-bottom: 15px;
}
.refactor-wallets #deposit-modal .bank-details h3, .refactor-wallets #withdrawalModal .bank-details h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px;
}
.refactor-wallets #deposit-modal .bank-details p, .refactor-wallets #withdrawalModal .bank-details p {
  text-align: start;
}
.refactor-wallets #deposit-modal .bank-details .bank-details-info, .refactor-wallets #withdrawalModal .bank-details .bank-details-info {
  background-color: #f5fcff;
  border-radius: 7px;
  padding: 15px;
  margin-top: 0;
  border: 1px solid #f3f4f6;
}
.refactor-wallets #deposit-modal .bank-details .bank-details-info .bank-info, .refactor-wallets #withdrawalModal .bank-details .bank-details-info .bank-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e7ebf2;
  font-weight: 600;
  color: #424e59;
  font-size: 14px;
}
.refactor-wallets #deposit-modal .bank-details .bank-details-info .bank-info:last-child, .refactor-wallets #withdrawalModal .bank-details .bank-details-info .bank-info:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.refactor-wallets #deposit-modal .bank-details .bank-details-info .bank-info .copyMainBtn, .refactor-wallets #withdrawalModal .bank-details .bank-details-info .bank-info .copyMainBtn {
  background-color: #e2f3ff;
}
.refactor-wallets #deposit-modal .alert, .refactor-wallets #withdrawalModal .alert {
  border-radius: 8px;
}
.refactor-wallets #deposit-modal .alert.alert-warning, .refactor-wallets #withdrawalModal .alert.alert-warning {
  background-color: #fffbeb !important;
  border-left: none;
  border-top: none;
  border-bottom: none;
  border-right: 4px solid var(--warning);
  color: #854d0e;
}
.refactor-wallets #deposit-modal .alert.alert-info, .refactor-wallets #withdrawalModal .alert.alert-info {
  background-color: #dbeafe;
  border-left: 4px solid var(--primary);
  color: var(--primary-dark);
}
.refactor-wallets .current-balance {
  background-color: var(--primary-light);
  padding: 18px;
  border-radius: 12px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 18px;
  color: var(--primary);
  font-weight: 700;
  border: 1px dashed var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Wallet balance-log pages — reskinned to match the wallet index look */
.wallet-logs .logs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
}
.wallet-logs .logs-header .page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.wallet-logs .logs-header .page-title > i {
  color: var(--primary);
}
.wallet-logs .logs-header .page-title .back-link {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f4f9ff;
  color: #316699;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: var(--transition);
}
.wallet-logs .logs-header .page-title .back-link:hover {
  background: var(--primary);
  color: #fff;
}
.wallet-logs .logs-header .page-subtitle {
  font-size: 14px;
  color: var(--gray);
  margin: 8px 0 0;
}
.wallet-logs .logs-header .log-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  transition: var(--transition);
}
.wallet-logs .logs-header .log-add-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  color: #fff;
}
.wallet-logs .log-card {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.wallet-logs .log-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.wallet-logs .log-card .log-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-lighter);
}
.wallet-logs .log-card .log-card-head .log-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.wallet-logs .log-card .log-card-head .log-card-title i {
  color: var(--primary);
}
.wallet-logs .log-card .log-card-head .log-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  background: var(--gray-lighter);
  padding: 4px 14px;
  border-radius: 20px;
}
.wallet-logs .log-card .table-scroll {
  overflow-x: auto;
}
.wallet-logs .log-card table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.wallet-logs .log-card table thead th {
  background: #f8fafc;
  color: var(--gray);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 14px 18px;
  border: 0;
  white-space: nowrap;
  text-align: start;
}
.wallet-logs .log-card table tbody td {
  padding: 16px 18px;
  border: 0;
  border-top: 1px solid var(--gray-lighter);
  font-size: 13.5px;
  color: var(--dark);
  vertical-align: middle;
}
.wallet-logs .log-card table tbody td a {
  color: var(--primary);
}
.wallet-logs .log-card table tbody td small {
  color: var(--gray);
}
.wallet-logs .log-card table tbody tr {
  transition: var(--transition);
}
.wallet-logs .log-card table tbody tr:hover td {
  background: #f9fbff;
}
.wallet-logs .log-card .amount-cell {
  font-weight: 700;
  direction: ltr;
  display: inline-block;
}
.wallet-logs .log-card .wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--gray-lighter);
  color: var(--gray);
}
.wallet-logs .log-card .wallet-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.wallet-logs .log-card .wallet-chip--success {
  background: #ecfdf5;
  color: #059669;
}
.wallet-logs .log-card .wallet-chip--pending {
  background: #fffbeb;
  color: #d97706;
}
.wallet-logs .log-card .wallet-chip--failed {
  background: #fef2f2;
  color: #dc2626;
}
.wallet-logs .log-card .log-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
}
.wallet-logs .log-card .log-foot .dataTables_info {
  color: var(--gray);
  font-size: 13px;
}
.wallet-logs .log-card .log-foot .pagination {
  margin: 0;
}
@media (max-width: 768px) {
  .wallet-logs .logs-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.card-websites .card-body .table {
  width: 100%;
  max-width: 100%;
}
.card-websites .shipping-filters {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 992px) {
  .card-websites .shipping-filters {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 576px) {
  .card-websites .shipping-filters {
    grid-template-columns: repeat(2, 1fr);
  }
}
.card-websites .filter-card.ws-enabled::before, .card-websites .filter-card.ws-enabled .status-icon {
  background: linear-gradient(135deg, #4caf50, #388e3c);
}
.card-websites .filter-card.ws-disabled::before, .card-websites .filter-card.ws-disabled .status-icon {
  background: linear-gradient(135deg, #ff4d4d, #c2185b);
}
.card-websites .filter-card.ws-review::before, .card-websites .filter-card.ws-review .status-icon {
  background: linear-gradient(135deg, #f6b73c, #e0951a);
}
.card-websites .filter-card.ws-trial::before, .card-websites .filter-card.ws-trial .status-icon {
  background: linear-gradient(135deg, #f6b73c, #e0951a);
}
.card-websites .filter-card.ws-idle::before, .card-websites .filter-card.ws-idle .status-icon {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}
.card-websites .filter-card.ws-suspended::before, .card-websites .filter-card.ws-suspended .status-icon {
  background: linear-gradient(135deg, #ff9800, #ff5722);
}
.card-websites .fold-meta {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.card-websites .fold-meta .label {
  margin: 0;
  display: inline-flex;
  width: auto;
  font-size: 10.5px;
  padding: 2px 7px;
  white-space: nowrap;
}
@media (min-width: 576px) and (max-width: 1199.98px) {
  .card-websites .shipping-overview .shipping-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-websites .shipping-overview .filter-card {
    padding: 8px 10px;
  }
  .card-websites .shipping-overview .filter-card .filter-header .status-info .status-icon {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }
  .card-websites .shipping-overview .filter-card .filter-header .status-info .status-text {
    font-size: 0.8rem;
  }
  .card-websites .shipping-overview .filter-card .filter-header .status-count {
    font-size: 1rem;
  }
  .card-websites table .col-stats, .card-websites table .col-plan, .card-websites table .col-preview {
    display: none;
  }
  .card-websites table .col-name {
    max-width: 260px;
  }
  .card-websites table .col-name a {
    white-space: normal;
    word-break: break-word;
  }
  .card-websites table .col-name .taxonomy-column a, .card-websites table .col-name .label, .card-websites table .col-name .badge {
    display: inline-flex;
    width: auto;
  }
  .card-websites .fold-meta {
    display: flex;
  }
}
@media (max-width: 575.98px) {
  #content .card-websites.card-orders .shipping-overview {
    overflow: visible;
  }
  #content .card-websites.card-orders .shipping-overview .shipping-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    gap: 8px;
  }
  .card-websites .fold-meta {
    display: none;
  }
  #content .card-websites.card-orders .card-body {
    padding: 0;
  }
  #content .card-websites.card-orders .card-body .table {
    display: block;
  }
  #content .card-websites.card-orders .card-body .table thead {
    display: none;
  }
  #content .card-websites.card-orders .card-body .table tbody {
    display: block;
  }
  #content .card-websites.card-orders .card-body .table tbody tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    border: 1px solid #e6edf3;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
  }
  #content .card-websites.card-orders .card-body .table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1 1 100%;
    min-width: 0;
    padding: 9px 14px;
    border: 0;
    border-top: 1px solid #f1f5f9;
    text-align: start;
  }
  #content .card-websites.card-orders .card-body .table tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748b;
    font-size: 12.5px;
  }
  #content .card-websites.card-orders .card-body .table .col-logo, #content .card-websites.card-orders .card-body .table .col-status {
    flex: 0 0 auto;
    border-top: 0;
    padding-top: 14px;
  }
  #content .card-websites.card-orders .card-body .table .col-logo::before, #content .card-websites.card-orders .card-body .table .col-status::before {
    content: none;
  }
  #content .card-websites.card-orders .card-body .table .col-logo {
    order: 1;
    justify-content: flex-start;
  }
  #content .card-websites.card-orders .card-body .table .col-logo .img-box img {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
  }
  #content .card-websites.card-orders .card-body .table .col-status {
    order: 2;
    margin-inline-start: auto;
  }
  #content .card-websites.card-orders .card-body .table .col-name {
    order: 3;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-top: 0;
    padding-top: 4px;
    font-size: 15px;
    font-weight: 800;
  }
  #content .card-websites.card-orders .card-body .table .col-name::before {
    content: none;
  }
  #content .card-websites.card-orders .card-body .table .col-owner {
    order: 4;
  }
  #content .card-websites.card-orders .card-body .table .col-stats {
    order: 5;
  }
  #content .card-websites.card-orders .card-body .table .col-created {
    order: 6;
  }
  #content .card-websites.card-orders .card-body .table .col-plan {
    order: 7;
  }
  #content .card-websites.card-orders .card-body .table .col-preview, #content .card-websites.card-orders .card-body .table .col-control {
    flex: 0 0 auto;
  }
  #content .card-websites.card-orders .card-body .table .col-preview::before, #content .card-websites.card-orders .card-body .table .col-control::before {
    content: none;
  }
  #content .card-websites.card-orders .card-body .table .col-preview {
    order: 8;
  }
  #content .card-websites.card-orders .card-body .table .col-control {
    order: 9;
    margin-inline-start: auto;
  }
}

.card-sales .card-body .table {
  width: 100%;
  max-width: 100%;
}
.card-sales .bulk-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 4px 14px;
}
.card-sales tbody tr.is-reviewed td {
  background: rgba(76, 175, 80, 0.07);
}
.card-sales .log-icon i {
  font-size: 1.1rem;
}
@media (max-width: 575.98px) {
  #content .card-sales.card-orders .card-body {
    padding: 0;
  }
  #content .card-sales.card-orders .card-body .table {
    display: block;
  }
  #content .card-sales.card-orders .card-body .table thead {
    display: none;
  }
  #content .card-sales.card-orders .card-body .table tbody {
    display: block;
  }
  #content .card-sales.card-orders .card-body .table tbody tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    border: 1px solid #e6edf3;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
  }
  #content .card-sales.card-orders .card-body .table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1 1 100%;
    min-width: 0;
    padding: 9px 14px;
    border: 0;
    border-top: 1px solid #f1f5f9;
    text-align: start;
  }
  #content .card-sales.card-orders .card-body .table tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748b;
    font-size: 12.5px;
  }
  #content .card-sales.card-orders .card-body .table .col-check, #content .card-sales.card-orders .card-body .table .col-id, #content .card-sales.card-orders .card-body .table .col-status {
    flex: 0 0 auto;
    border-top: 0;
    padding-top: 14px;
  }
  #content .card-sales.card-orders .card-body .table .col-check::before, #content .card-sales.card-orders .card-body .table .col-id::before, #content .card-sales.card-orders .card-body .table .col-status::before {
    content: none;
  }
  #content .card-sales.card-orders .card-body .table .col-check {
    order: 1;
  }
  #content .card-sales.card-orders .card-body .table .col-id {
    order: 2;
  }
  #content .card-sales.card-orders .card-body .table .col-status {
    order: 3;
    margin-inline-start: auto;
  }
  #content .card-sales.card-orders .card-body .table .col-desc {
    order: 4;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-top: 0;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 700;
    white-space: normal;
    word-break: break-word;
  }
  #content .card-sales.card-orders .card-body .table .col-desc::before {
    content: none;
  }
  #content .card-sales.card-orders .card-body .table .col-site {
    order: 5;
  }
  #content .card-sales.card-orders .card-body .table .col-user {
    order: 6;
  }
  #content .card-sales.card-orders .card-body .table .col-tags {
    order: 7;
  }
  #content .card-sales.card-orders .card-body .table .col-reviewed {
    order: 8;
  }
  #content .card-sales.card-orders .card-body .table .col-created {
    order: 9;
  }
}

#discountsTable .amounts-container {
  display: flex;
  align-items: end;
  justify-content: start;
  gap: 10px;
  margin-bottom: 15px;
}
#discountsTable .amounts-container label {
  font-weight: bold;
  margin-bottom: 5px;
}
#discountsTable .amounts-container .form-group {
  margin-bottom: 0;
}
#discountsTable .amounts-container .btn.remove_quantity {
  background-color: #ffe6e6;
  color: #b05151;
  border-radius: 6px;
  border: 1px solid #d0afaf;
  font-size: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#discountsTable .amounts-container .btn.remove_quantity:hover {
  background-color: #d94040;
  color: #fff;
  border: 1px solid #d94040;
}
#discountsTable #add_quantity {
  display: inline-flex;
}

.pe-cross .pe-cross-main {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pe-cross #crossProductList .row {
  margin-inline: 0;
  padding: 8px;
  background: #fcfdff;
  border: 1px solid #e6edf3;
  border-radius: 8px;
}
.pe-cross .remove-cross-product {
  width: 100%;
  background: #f4f6f9;
  border: 1px solid #e6edf3;
  border-radius: 6px;
  color: #939393;
  font-size: 16px;
  line-height: 1;
}
.pe-cross .remove-cross-product:hover {
  color: #d62828;
  background: #fdf1f1;
  border-color: #f1c2c2;
}

/* start ads module style (campaign wizard + previews) */
.ads-stepper {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.ads-stepper .ads-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}
.ads-stepper .ads-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  inset-inline-end: 50%;
  width: 100%;
  height: 2px;
  background: #e6edf3;
}
.ads-stepper .ads-step a {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.ads-stepper .ads-step a:hover .ads-step-name {
  color: #348fe2;
}
.ads-stepper .ads-step .ads-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e6edf3;
  color: #737373;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.ads-stepper .ads-step .ads-step-name {
  margin-block-start: 6px;
  font-size: 12.5px;
  color: #737373;
}
.ads-stepper .ads-step.done:not(:first-child)::before {
  background: #4ace71;
}
.ads-stepper .ads-step.done .ads-step-dot {
  background: #4ace71;
  border-color: #4ace71;
  color: #fff;
}
.ads-stepper .ads-step.done .ads-step-name {
  color: #37414b;
}
.ads-stepper .ads-step.current:not(:first-child)::before {
  background: #4ace71;
}
.ads-stepper .ads-step.current .ads-step-dot {
  background: #348fe2;
  border-color: #348fe2;
  color: #fff;
}
.ads-stepper .ads-step.current .ads-step-name {
  color: #2d353c;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .ads-stepper .ads-step:not(.current) .ads-step-name {
    display: none;
  }
}

.ads-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.ads-choice-card {
  display: block;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(45, 53, 60, 0.06);
  padding: 20px;
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ads-choice-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 53, 60, 0.12);
  border-color: #348fe2;
  color: inherit;
}

.ads-choice-icon,
.ads-conn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(52, 143, 226, 0.1);
  color: #348fe2;
  font-size: 18px;
  flex-shrink: 0;
}

.brand-meta .ads-choice-icon,
.brand-meta .ads-conn-icon {
  background: rgba(24, 119, 242, 0.1);
  color: #1877F2;
}

.brand-google .ads-choice-icon,
.brand-google .ads-conn-icon {
  background: rgba(66, 133, 244, 0.1);
  color: #4285F4;
}

.brand-tiktok .ads-choice-icon,
.brand-tiktok .ads-conn-icon {
  background: #eff2f5;
  color: #111;
}

.brand-youtube .ads-choice-icon,
.brand-youtube .ads-conn-icon {
  background: rgba(255, 0, 0, 0.1);
  color: #FF0000;
}

.ads-choice-title {
  font-weight: 700;
  font-size: 15px;
  color: #2d353c;
  margin-block-start: 12px;
}

.ads-choice-hint {
  font-size: 12.5px;
  color: #737373;
  margin-block-start: 4px;
}

.ads-counter {
  font-size: 0.75rem;
  color: #737373;
  text-align: end;
  margin-block-start: 2px;
}
.ads-counter.over {
  color: #ff2121;
}

.ads-preview-frame {
  max-width: 340px;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  overflow: hidden;
}
.ads-preview-frame .ads-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.ads-preview-frame .ads-preview-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eff2f5;
  flex-shrink: 0;
}
.ads-preview-frame .ads-preview-page {
  font-weight: 700;
  font-size: 13px;
  color: #2d353c;
}
.ads-preview-frame .ads-preview-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: #eff2f5;
  display: block;
}
.ads-preview-frame .ads-preview-body {
  padding: 10px 12px;
}
.ads-preview-frame .ads-preview-text {
  font-size: 13px;
  color: #737373;
  min-height: 1em;
}
.ads-preview-frame .ads-preview-title {
  font-weight: 700;
  font-size: 14px;
  color: #2d353c;
}
.ads-preview-frame .ads-preview-cta {
  display: inline-block;
  background: rgba(52, 143, 226, 0.1);
  color: #348fe2;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 12px 12px;
}

.ads-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e6edf3;
}

.ads-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px dashed #abbfd2;
  background: #eff2f5;
  color: #737373;
}

.ads-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 16px;
}

.ads-conn-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ads-conn-head .ads-conn-title {
  flex-grow: 1;
  font-weight: 700;
  color: #2d353c;
}

.ads-ai-error {
  display: none;
  font-size: 0.75rem;
  color: #ff2121;
  margin-inline-start: 8px;
}
.ads-ai-error.show {
  display: inline;
}

/* end ads module style */
.card-customers .form-group {
  margin-bottom: 8px;
}
.card-customers .customer-details .form-group {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;
}
.card-customers .customer-details .form-group .img-box {
  width: 100px;
  height: 100px;
}
.card-customers .customer-details .btn-add {
  border: 1px solid #348fe2;
  color: #348fe2;
  padding: 0 15px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
}
.card-customers .customer-details .btn-add:hover {
  background-color: #348fe2;
  color: #fff;
}

.phone-number {
  direction: initial;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 15px !important;
}

.input-group-addon {
  padding: 0 10px;
  border: none !important;
}
.input-group-addon label {
  font-size: 10px;
}
.input-group-addon:first-child {
  border-left: 0;
  border-right: none;
}

.profile form .c-profile .upload-area {
  border-radius: 50%;
  overflow: hidden;
}

.pe-user .control-label,
.pe-customer .control-label {
  display: block;
  text-align: start !important;
  font-size: 12.5px;
  font-weight: 600;
  color: #2d353c;
  margin-bottom: 5px;
}
.pe-user .form-control,
.pe-user .form-select,
.pe-customer .form-control,
.pe-customer .form-select {
  border: 1px solid #dbe3ec;
  border-radius: 6px;
  font-size: 12.5px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pe-user .form-control:focus,
.pe-user .form-select:focus,
.pe-customer .form-control:focus,
.pe-customer .form-select:focus {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.12);
}
.pe-user textarea.form-control,
.pe-customer textarea.form-control {
  min-height: 84px;
}
.pe-user .iti,
.pe-customer .iti {
  width: 100%;
}
.pe-user .c-profile .upload-area,
.pe-customer .c-profile .upload-area {
  margin: 0 auto;
}
.pe-user .input-group .form-control[disabled],
.pe-customer .input-group .form-control[disabled] {
  background: #f8fafc;
}
.pe-user #roles ~ .col-sm-12 .checkbox,
.pe-user .form-group > .col-sm-12 .checkbox,
.pe-customer #roles ~ .col-sm-12 .checkbox,
.pe-customer .form-group > .col-sm-12 .checkbox {
  width: 100%;
  max-width: none;
  flex: 0 0 100%;
  margin-bottom: 4px;
}
.pe-user .social-options,
.pe-customer .social-options {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
}
.pe-user .social-options .card-header,
.pe-customer .social-options .card-header {
  padding: 0 0 6px;
}
.pe-user .social-options .card-title a,
.pe-customer .social-options .card-title a {
  color: #939393;
  font-weight: 600;
  font-size: 12.5px;
}
.pe-user .social-options .panel-bod,
.pe-customer .social-options .panel-bod {
  padding: 0 !important;
}
.pe-user .social-options .icons-box,
.pe-customer .social-options .icons-box {
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f7fb;
  border: 1px solid #dbe3ec;
  border-inline-end: 0;
  border-start-start-radius: 6px;
  border-end-start-radius: 6px;
  color: #7891aa;
  font-size: 14px;
}
.pe-user .social-options .icons-box + .form-control,
.pe-customer .social-options .icons-box + .form-control {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.pe-user .pe-col-side .form-group,
.pe-customer .pe-col-side .form-group {
  margin-bottom: 12px;
}

.reports-row > [class^=col-] {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.reports-panel .reports-row .reports-box {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  height: 150px;
  width: 100%;
  font-size: 16px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px rgba(223, 219, 242, 0.85);
  overflow: hidden;
}
.reports-panel .reports-row .reports-box h3 {
  font-weight: bold;
  font-size: 20px;
  margin: 0 0 10px 0;
}
.reports-panel .reports-row .reports-box .reports-disc {
  font-size: 12px;
  color: #3a4854;
  max-height: 38px;
  overflow: hidden;
}
.reports-panel .reports-row .reports-box .reports-button {
  background-color: #348fe2;
  height: 34px;
  padding: 0 11px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
}
.reports-panel .reports-row .reports-box .reports-button:hover {
  background-color: #0a6aa1;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.reports-panel tbody tr td .label {
  background: #b9d5ee;
  color: #333;
  display: initial;
}

@media (max-width: 767px) {
  .reports-row .reports-box {
    height: 160px;
  }
  .reports-row .reports-box .reports-disc {
    font-size: 12px;
    max-height: 38px;
  }
}
.widget-stats .stats-link a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.widget-stats .stats-link a svg, .widget-stats .stats-link a i {
  position: absolute;
  inset-inline-start: 10px;
}
.widget-stats .stats-info h4 {
  font-size: 16px;
}
.widget-stats .stats-info p {
  font-weight: bold;
}

@media (max-width: 567px) {
  body.rtl .widget .stats-icon {
    font-size: 35px;
    height: 50px;
    width: 50px;
    line-height: 70px;
  }
}
.customers-groups-section {
  margin-bottom: 24px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  padding: 16px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.customers-groups-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.customers-groups-header i {
  font-size: 16px;
  color: #348fe2;
}

.customers-groups-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.customers-groups-count {
  font-size: 12px;
  color: #888;
  background: #f1f3f5;
  padding: 2px 10px;
  border-radius: 20px;
  margin-inline-start: auto;
}

.customers-groups-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.customers-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  background: #f8f9fa;
  border: 1px solid #e4e7eb;
  color: #495057;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.customers-item .customers-item-icon {
  font-size: 14px;
  color: #adb5bd;
  transition: color 0.18s ease;
}
.customers-item .customers-item-name {
  line-height: 1;
}
.customers-item .customers-item-count {
  font-size: 11.5px;
  font-weight: 700;
  background: #e9ecef;
  color: #666;
  padding: 2px 9px;
  border-radius: 20px;
  transition: background 0.18s ease, color 0.18s ease;
}
.customers-item:hover {
  border-color: #348fe2;
  color: #348fe2;
  background: rgba(52, 143, 226, 0.05);
  box-shadow: 0 2px 8px rgba(52, 143, 226, 0.12);
  transform: translateY(-1px);
}
.customers-item:hover .customers-item-icon {
  color: #348fe2;
}
.customers-item:hover .customers-item-count {
  background: rgba(52, 143, 226, 0.12);
  color: #348fe2;
}
.customers-item.active {
  background: #348fe2;
  border-color: #348fe2;
  color: #fff;
  box-shadow: 0 3px 10px rgba(52, 143, 226, 0.3);
  transform: translateY(-1px);
}
.customers-item.active .customers-item-icon {
  color: rgba(255, 255, 255, 0.85);
}
.customers-item.active .customers-item-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.customers-item.customers-item-add {
  background: rgba(52, 143, 226, 0.04);
  border: 2px dashed rgba(52, 143, 226, 0.5);
  color: #348fe2;
  font-weight: 600;
}
.customers-item.customers-item-add .customers-item-icon {
  font-size: 12px;
  color: #348fe2;
  background: rgba(52, 143, 226, 0.12);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease;
}
.customers-item.customers-item-add:hover {
  background: #348fe2;
  border-color: #348fe2;
  border-style: solid;
  color: #fff;
  box-shadow: 0 3px 10px rgba(52, 143, 226, 0.3);
}
.customers-item.customers-item-add:hover .customers-item-icon {
  color: #348fe2;
  background: rgba(255, 255, 255, 0.9);
}

.partners-edits .input-container .main-img-dropzone .img-box {
  height: 220px;
  width: 220px;
}
.partners-edits .input-container .main-img-dropzone .photo_description {
  display: none;
}

.website-info .google-map-url {
  display: flex;
  margin-bottom: 9px;
}
.website-info .google-map-url input {
  border: 1px solid #e3e3e3;
  border-right: none;
  border-radius: 3px 0 0 3px;
  padding: 5px 10px;
  margin-left: 0 !important;
}
.website-info .google-map-url input::-webkit-input-placeholder {
  text-align: right;
}
.website-info .google-map-url input:-ms-input-placeholder {
  text-align: right;
}
.website-info .google-map-url input::placeholder {
  text-align: right;
}
.website-info .google-map-url .map-icon-box {
  width: 34px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #e3e3e3;
  background-color: #eff7ff;
  border-left: none;
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
}
.website-info .google-map-url .map-icon-box svg, .website-info .google-map-url .map-icon-box i {
  font-size: 16px;
  color: #7891aa;
}
.website-info textarea.form-control {
  min-height: initial;
  max-height: initial !important;
  height: 60px;
  min-width: 100%;
}

.website-settings {
  padding: 0;
  max-width: 900px;
  margin-inline: auto;
}
.website-settings__empty {
  padding: 28px;
  text-align: center;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 8px;
}
.website-settings .settings-group {
  position: relative;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-bottom: 16px;
}
.website-settings .settings-group:last-child {
  margin-bottom: 0;
}
.website-settings .settings-group__title {
  margin: 0;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #2d353c;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
}
.website-settings .settings-group__items {
  padding: 2px 20px;
}
.website-settings .setting-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #f0f3f6;
}
.website-settings .setting-row:last-child {
  border-bottom: 0;
}
.website-settings .setting-row.is-disabled .setting-row__label {
  color: #939393;
}
.website-settings .setting-row__info {
  flex: 1 1 auto;
  min-width: 0;
}
.website-settings .setting-row__label {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #2d353c;
  cursor: pointer;
}
.website-settings .setting-row__help {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #939393;
}
.website-settings .setting-row__control {
  flex: 0 0 auto;
  width: 290px;
  max-width: 46%;
}
.website-settings .setting-row__error {
  display: block;
  margin-top: 6px;
  color: #ff2121;
  font-size: 11px;
}
.website-settings .setting-control {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.website-settings .setting-control .form-control {
  height: 38px;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 12px;
  border: 1px solid #dbe3ec;
  border-start-start-radius: 6px;
  border-end-start-radius: 6px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.website-settings .setting-control .form-control:focus {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.12);
  position: relative;
  z-index: 2;
}
.website-settings .setting-control select.form-control {
  cursor: pointer;
}
.website-settings .setting-control .btn {
  flex-shrink: 0;
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  margin-inline-start: -1px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #348fe2;
  border: 1px solid #348fe2;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 6px;
  border-end-end-radius: 6px;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.website-settings .setting-control .btn:hover {
  background: #337ab7;
  border-color: #337ab7;
}
.website-settings .setting-control .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.website-settings .setting-control--switch {
  align-items: center;
  justify-content: flex-end;
}
.website-settings .setting-control--switch .form-check.form-switch .form-check-input {
  font-size: 1.35rem;
}
.website-settings .setting-control--stacked {
  display: block;
}
.website-settings .setting-control--stacked .form-control {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.website-settings .setting-control--stacked textarea.form-control {
  min-height: 92px;
}
.website-settings .setting-control--stacked .btn {
  margin: 12px 0 0;
  height: 36px;
  border-radius: 6px;
}
.website-settings .setting-control--json textarea.form-control {
  font-family: monospace;
  min-height: 150px;
}
.website-settings .setting-group-fields__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.website-settings .setting-group-fields__label {
  flex: 0 0 38%;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #2d353c;
}
.website-settings .setting-group-fields__input {
  flex: 1 1 auto;
  min-width: 0;
}
.website-settings .setting-group-fields__input .form-control {
  height: 36px;
  border-radius: 6px;
}
@media (max-width: 767.98px) {
  .website-settings .setting-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .website-settings .setting-row__control {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 575.98px) {
  .website-settings .settings-group__items {
    padding: 2px 14px;
  }
}

.ws-settings {
  margin-top: 18px;
}
.ws-settings .pe-card-head {
  margin-bottom: 14px;
}
.ws-settings .pe-card-body {
  padding-top: 18px;
}
.ws-settings .website-settings .settings-group {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  margin-bottom: 20px;
}
.ws-settings .website-settings .settings-group::before {
  display: none;
}
.ws-settings .settings-group__title {
  padding-inline: 0;
  background: none;
}
.ws-settings .settings-group__items {
  padding-inline: 0;
}

.card-body .form-group .color-select-container {
  justify-content: right;
}
.card-body .form-group .color-select-container .color-select-option-selected {
  border: 3px solid #00B0FF !important;
}
.card-body .form-group .color-select-container .color-select-option-selected:hover {
  border: 3px solid #00B0FF !important;
}
.card-body .form-social {
  display: flex;
}
.card-body .form-social span {
  width: 33px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: 17px;
  border: 1px solid #ccd0d4;
  border-left: 0;
}
.card-body .form-social span i {
  color: #b3b3b3;
}
.card-body .form-social input {
  border-right: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  height: 36px;
  padding: 5px 0 5px 5px;
  text-align: left;
}
.card-body .switchery {
  height: 20px;
  width: 40px;
}
.card-body .switchery > small {
  background: #fff;
  border-radius: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  height: 20px;
  position: absolute;
  top: 0;
  width: 20px;
}

.social-options {
  background-color: #eff7ff;
  cursor: pointer;
}
.social-options .card-header {
  cursor: pointer;
  width: 100%;
}
.social-options .card-header label {
  cursor: pointer;
  font-size: 12px;
  line-height: 1.4;
  width: 85%;
  color: #686868;
}
.social-options .card-header h4 {
  color: #348fe2;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
  display: block !important;
  margin-bottom: 0;
}
.social-options .card-header h4 label {
  margin-top: 10px;
  width: 100%;
  line-height: 1.2;
}
.social-options .panel-collapse .form-group, .social-options .card-collapse .form-group {
  display: flex;
  margin-bottom: 9px;
}
.social-options .panel-collapse .form-group input, .social-options .card-collapse .form-group input {
  border: 1px solid #e3e3e3;
  border-right: none;
  border-radius: 3px 0 0 3px;
  padding: 5px 10px;
  text-align: left;
  margin-left: 0 !important;
}
.social-options .panel-collapse .form-group input::-webkit-input-placeholder, .social-options .card-collapse .form-group input::-webkit-input-placeholder {
  text-align: right;
}
.social-options .panel-collapse .form-group input:-ms-input-placeholder, .social-options .card-collapse .form-group input:-ms-input-placeholder {
  text-align: right;
}
.social-options .panel-collapse .form-group input::placeholder, .social-options .card-collapse .form-group input::placeholder {
  text-align: right;
}
.social-options .icons-box {
  width: 34px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #e3e3e3;
  border-left: none;
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
}
.social-options .icons-box svg, .social-options .icons-box i {
  font-size: 16px;
  color: #7891aa;
}
.social-options .form-control {
  height: 40px;
}

@media (max-width: 567px) {
  .color-select-container .color-select-option {
    height: 28px;
    width: 28px;
    margin: 4px;
    float: right;
  }
  .color-select-container .color-select-option:first-child {
    clear: right;
  }
}
.ltr .social-options .panel-collapse .form-group .d-flex, .ltr .social-options .card-collapse .form-group .d-flex {
  flex-direction: row-reverse;
}
.ltr .social-options .panel-collapse .form-group input, .ltr .social-options .card-collapse .form-group input {
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  text-align: right;
  margin-left: initial !important;
  margin-right: 0 !important;
}
.ltr .social-options .panel-collapse .form-group input::-webkit-input-placeholder, .ltr .social-options .card-collapse .form-group input::-webkit-input-placeholder {
  text-align: left;
}
.ltr .social-options .panel-collapse .form-group input:-ms-input-placeholder, .ltr .social-options .card-collapse .form-group input:-ms-input-placeholder {
  text-align: left;
}
.ltr .social-options .panel-collapse .form-group input::placeholder, .ltr .social-options .card-collapse .form-group input::placeholder {
  text-align: left;
}
.ltr .social-options .icons-box {
  border-left: initial;
  border-right: none;
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
}
@media (max-width: 567px) {
  .ltr .color-select-container .color-select-option {
    float: left;
  }
  .ltr .color-select-container .color-select-option:first-child {
    clear: left;
  }
}

.settings-cards .group-section {
  margin-bottom: 50px;
}
.settings-cards .group-section .group-head-label {
  font-size: 16px;
  font-weight: bold;
  margin: 0 10px 15px;
  text-align: start;
  color: #5f676f;
}
.settings-cards .card-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 20px;
  min-height: 175px;
  margin-bottom: 18px;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
}
.settings-cards .card-item .available-notes {
  background: #ffc62a;
  color: #705f2f;
  font-size: 13px;
  font-weight: 700;
  height: 30px;
  left: -40px;
  line-height: 30px;
  position: absolute;
  text-align: center;
  top: 18px;
  transform: rotate(-45deg);
  width: 140px;
  z-index: 4;
  box-shadow: 0 1px 4px rgba(55, 55, 55, 0.21);
  overflow: hidden;
}
.settings-cards .card-item {
  /* اللمعة */
}
.settings-cards .card-item .available-notes::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.2) 100%);
  transform: rotate(25deg);
  animation: shine 2s ease-out 0.5s 1 forwards;
  pointer-events: none;
  opacity: 1;
}
.settings-cards .card-item {
  /* Keyframes */
}
@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) rotate(25deg);
    opacity: 0; /* يخليه يختفي بعد ما يعدي */
  }
}
.settings-cards .card-item span {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
}
.settings-cards .card-item span svg, .settings-cards .card-item span i {
  font-size: 16px;
  color: #3683c9;
  margin-bottom: 0;
}
.settings-cards .card-item span svg.feature-on, .settings-cards .card-item span i.feature-on {
  color: #28a745;
}
.settings-cards .card-item span svg.feature-off, .settings-cards .card-item span i.feature-off {
  color: #bebebe;
}
.settings-cards .card-item .closed {
  width: 30px;
  height: 30px;
  background-color: #c6e2fc;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-cards .card-item .check svg, .settings-cards .card-item .check i {
  font-size: 20px;
}
.settings-cards .card-item div {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.settings-cards .card-item div .icon-box {
  font-size: 35px;
}
.settings-cards .card-item div a {
  font-size: 16px;
  font-weight: 500;
  color: #348fe2;
  display: inline-flex;
  margin-bottom: 5px;
}
.settings-cards .card-item div a:after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.settings-cards .card-item div h4 {
  margin: 10px 0 0 0;
  font-size: 16px;
  font-weight: bold;
  color: #737a80;
}
.settings-cards .card-item div h6 {
  font-size: 12px;
  color: #787e83;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maintenance-mode textarea {
  min-height: 130px;
  background-color: #f4faff;
}
.maintenance-mode .checkbox {
  text-align: left;
}

.ltr .maintenance-mode .checkbox {
  text-align: right;
}

@media (max-width: 567px) {
  .feat-qrcode .card-body.p-30 {
    padding: 0 !important;
  }
  .feat-qrcode .form-group, .feat-qrcode form {
    display: inline-block;
    width: 100%;
  }
  .feat-qrcode .comments-disc {
    margin-top: 30px;
  }
}

.pe-card.fs-card:has(.feat-qrcode) {
  max-width: 1000px;
}

.feat-qrcode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.feat-qrcode .qr-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.feat-qrcode .qr-card:hover {
  transform: translateY(-3px);
  border-color: #348fe2;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.feat-qrcode .qr-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.feat-qrcode .qr-card__icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef7ff 0%, #e0f2ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat-qrcode .qr-card__icon i, .feat-qrcode .qr-card__icon svg {
  font-size: 1.5em;
  color: #348fe2;
}
.feat-qrcode .qr-card__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.4;
}
.feat-qrcode .qr-card__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 22px;
}
.feat-qrcode .qr-card__frame img, .feat-qrcode .qr-card__frame svg, .feat-qrcode .qr-card__frame canvas {
  width: 100%;
  max-width: 280px;
  height: auto;
}
.feat-qrcode .qr-card__actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
}
.feat-qrcode .qr-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}
.feat-qrcode .qr-card__btn i, .feat-qrcode .qr-card__btn svg {
  font-size: 1.15em;
}
.feat-qrcode .qr-card__btn--download {
  background: #348fe2;
  color: #fff;
}
.feat-qrcode .qr-card__btn--download:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(52, 143, 226, 0.35);
}
.feat-qrcode .qr-card__btn--copy {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155;
}
.feat-qrcode .qr-card__btn--copy:hover {
  background: #fff;
  border-color: #348fe2;
  color: #348fe2;
}

.toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.input-group:has(> .toggle-password) {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group:has(> .toggle-password) .form-control {
  padding-inline-end: 35px;
}
.input-group:has(> .toggle-password) .toggle-password {
  position: absolute;
  z-index: 2;
  inset-inline-end: 10px;
  font-size: 16px;
}

.notifications-settings .settings-group__items {
  padding: 0;
}
.notifications-settings .notif-matrix {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
}
.notifications-settings .notif-matrix th,
.notifications-settings .notif-matrix td {
  padding: 14px 20px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f0f3f6;
}
.notifications-settings .notif-matrix .notif-matrix__type-head,
.notifications-settings .notif-matrix .notif-matrix__type {
  text-align: start;
  width: 40%;
}
.notifications-settings .notif-matrix thead th {
  font-size: 11.5px;
  font-weight: 600;
  color: #939393;
  background: #fbfdff;
  white-space: nowrap;
}
.notifications-settings .notif-matrix thead th i {
  margin-inline-end: 6px;
  font-size: 13px;
  color: #348fe2;
  opacity: 0.85;
}
.notifications-settings .notif-matrix thead th .fa-lock {
  color: #939393;
  font-size: 11px;
}
.notifications-settings .notif-matrix .notif-matrix__type {
  font-weight: 600;
  color: #2d353c;
}
.notifications-settings .notif-matrix tbody tr {
  transition: background 0.12s ease;
}
.notifications-settings .notif-matrix tbody tr:hover {
  background: #f8fbff;
}
.notifications-settings .notif-matrix tbody tr:last-child td {
  border-bottom: 0;
}
.notifications-settings .form-check.form-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.notifications-settings .form-check.form-switch .form-check-input {
  float: none;
  width: 42px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  background-color: #d9dee5;
  border-color: #d9dee5;
  box-shadow: none;
}
.notifications-settings .form-check.form-switch .form-check-input:checked {
  background-color: #348fe2;
  border-color: #348fe2;
}
.notifications-settings .form-check.form-switch .form-check-input:focus {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.12);
}
.notifications-settings .form-check.form-switch .form-check-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 575.98px) {
  .notifications-settings .notif-matrix th,
  .notifications-settings .notif-matrix td {
    padding: 12px;
  }
}

.website-info-edit .control-label,
.website-info-edit .wie-field__label {
  display: block;
  text-align: start !important;
  font-size: 12.5px;
  font-weight: 600;
  color: #2d353c;
  margin-bottom: 5px;
}
.website-info-edit .form-control {
  height: 38px;
  border: 1px solid #dbe3ec;
  border-radius: 6px;
  font-size: 12.5px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.website-info-edit .form-control:focus {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.12);
}
.website-info-edit textarea.form-control {
  height: auto;
  min-height: 72px;
  padding: 9px 12px;
}
.website-info-edit .iti {
  width: 100%;
}
.website-info-edit .pe-col-side .form-group {
  margin-bottom: 10px;
}
.website-info-edit .pe-col-side .form-group:last-child {
  margin-bottom: 0;
}

.custom-theme .panel-inverse > .card-header {
  flex-direction: row-reverse;
  justify-content: space-between;
}
.custom-theme .control-elements {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
  margin-bottom: 10px;
}
.section-elements {
  display: grid;
  grid-template-columns: auto 300px;
  grid-gap: 30px;
}

.left-side {
  background: white;
  box-shadow: 12px 0 30px rgba(0, 0, 0, 0.0705882353);
  width: 300px;
  height: 650px;
  padding: 20px;
  overflow-y: scroll;
  z-index: 100;
}
.left-side .sections-contents ul {
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
}
.left-side .sections-contents ul li a {
  pointer-events: none;
  text-decoration: none;
}

#rightSideContent {
  background: white;
  width: 100%;
  height: 650px;
  overflow-y: scroll;
  border: 3px dashed rgba(183, 197, 223, 0.5019607843);
}
#rightSideContent li {
  background: white;
  border: 1px solid #e9e9e9;
  margin: 0 15px;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
  padding: 5px 10px;
}
#rightSideContent li a.anchor {
  position: absolute;
  inset: 0;
  width: calc(100% - 200px);
  height: 100%;
  z-index: 11;
}
#rightSideContent li img {
  max-width: 100px;
}
#rightSideContent li .hand {
  cursor: pointer;
  flex: 0 0 50px;
  text-align: center;
}
#rightSideContent li .hand a {
  cursor: pointer;
  pointer-events: all;
  color: #707478;
}
#rightSideContent li .section_icon {
  flex: 0 0 50px;
}
#rightSideContent li .section_name {
  flex: 0 0 auto;
}
#rightSideContent li .hand,
#rightSideContent li .comments-checkbox,
#rightSideContent li .section_icon {
  margin: 0;
  position: relative;
  z-index: 12;
}
#rightSideContent li .section_name {
  z-index: 10;
}
#rightSideContent li .comments-checkbox {
  margin-right: auto;
}
#rightSideContent li .section_name {
  margin-right: 10px;
}
#rightSideContent li .section_name input {
  border: 0;
  padding: 5px 10px;
}
#rightSideContent li .section_name input:focus {
  border: 0;
  outline: 0;
}
#rightSideContent li .section_icon {
  height: 30px;
  border: 0;
}
#rightSideContent li .section_icon.iconpicker {
  flex-direction: row;
}
#rightSideContent li .section_icon.iconpicker .caret {
  margin-right: 10px !important;
  margin-left: 0 !important;
}
#rightSideContent p {
  padding: 30px;
  font-size: 18px;
}
#rightSideContent .item-link {
  display: none;
}
#rightSideContent .item-link.anchor {
  display: inline-flex;
}

#leftSideContent .hand,
#leftSideContent .section_name,
#leftSideContent .item-link,
#leftSideContent .comments-checkbox {
  display: none;
}
#leftSideContent .link-left {
  display: block;
}
#leftSideContent .list-group-item {
  cursor: grabbing;
}

#rightSideContent .hand,
#rightSideContent .section_name {
  display: block;
}

.icon-address {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-gap: 0;
}
.icon-address .form-group label {
  margin-bottom: 5px;
}
.icon-address .form-group .iconpicker {
  float: none;
  border-radius: 0;
}

.icon-picker-wrapper {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
}
.icon-picker-wrapper .icon-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 1px solid #e1e5e9;
  border-radius: 7px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
  position: relative;
  height: 40px;
  width: 45px;
}
.icon-picker-wrapper .icon-picker-trigger:hover {
  border-color: #348fe2;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}
.icon-picker-wrapper .icon-picker-trigger.active {
  border-color: #348fe2;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.icon-picker-wrapper .selected-icon {
  font-size: 20px;
  color: #348fe2;
  transition: all 0.3s ease;
}
.icon-picker-wrapper .selected-icon.default {
  color: #999;
}
.icon-picker-wrapper .dropdown-arrow {
  position: absolute;
  right: 15px;
  color: #999;
  transition: transform 0.3s ease;
  font-size: 14px;
}
.icon-picker-wrapper .cancel-icon {
  position: absolute;
  left: 15px;
  color: #999;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
}
.icon-picker-wrapper .cancel-icon.show {
  opacity: 1;
  visibility: visible;
}
.icon-picker-wrapper .cancel-icon:hover {
  color: #e74c3c;
  transform: scale(1.1);
}
.icon-picker-wrapper .icon-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #e1e5e9;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-15px);
  transition: all 0.3s ease;
  max-height: 500px;
  overflow: hidden;
  width: 300px;
  height: 350px;
}
.icon-picker-wrapper .icon-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.icon-picker-wrapper .search-container {
  padding: 10px;
  border-bottom: 2px solid #f0f0f0;
  background: #f8f9fa;
  border-radius: 15px 15px 0 0;
}
.icon-picker-wrapper .search-input {
  width: 100%;
  padding: 5px 15px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  background: white;
}
.icon-picker-wrapper .search-input:focus {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.icon-picker-wrapper .icons-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  background: white;
}
.icon-picker-wrapper .icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
}
.icon-picker-wrapper .icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f8f9fa;
  border: 2px solid transparent;
  aspect-ratio: 1;
}
.icon-picker-wrapper .icon-option:hover {
  background: #e3f2fd;
  border-color: #348fe2;
  transform: scale(1.05);
}
.icon-picker-wrapper .icon-option.selected {
  background: #348fe2;
  color: white;
  border-color: #348fe2;
}
.icon-picker-wrapper .icon-option i {
  font-size: 18px;
}
.icon-picker-wrapper .no-results {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-style: italic;
}
.icon-picker-wrapper .no-results i {
  font-size: 1.875rem;
  margin-bottom: 15px;
  color: #ddd;
}
.icon-picker-wrapper {
  /* Scrollbar styling */
}
.icon-picker-wrapper .icons-container::-webkit-scrollbar {
  width: 8px;
}
.icon-picker-wrapper .icons-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.icon-picker-wrapper .icons-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.icon-picker-wrapper .icons-container::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
@media (max-width: 768px) {
  .icon-picker-wrapper .container {
    padding: 20px;
  }
  .icon-picker-wrapper .icon-picker-wrapper {
    max-width: 100%;
  }
  .icon-picker-wrapper .icons-grid {
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
  }
}

.icon-picker-trigger.active .dropdown-arrow {
  transform: rotate(180deg);
}

.applyCoupons {
  padding: 7px;
  border: 1px solid #e9eef2;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.applyCoupons .btn-coupon {
  border: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  grid-gap: 8px;
  color: #6fab0f;
}
.applyCoupons .btn-coupon svg {
  width: 30px;
  fill: #6fab0f;
}
.applyCoupons .btn-coupon span {
  padding: 0;
}
.applyCoupons form {
  position: relative;
}
.applyCoupons form input {
  position: relative;
}
.applyCoupons form button {
  border: 0;
  position: absolute;
  left: 5px;
  top: 5px;
  max-width: 60px;
  border-radius: 5px;
  background: #000;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 10px;
  height: 28px;
}
.applyCoupons #coupon_error {
  margin-top: 5px;
  font-size: 12px;
  color: #b6250d;
}
.applyCoupons #success-msg {
  margin-top: 5px;
  font-size: 12px;
  color: #0db652;
}
.applyCoupons #coupon-form-btn.text-danger, .applyCoupons #coupon-form-btn.text-success {
  color: white !important;
}

.invoice-head-printing {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 567px) {
  .invoice-head-printing {
    display: block;
  }
}

.domain-steps {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.domain-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.domain-step .domain-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: #e9ecef;
  color: #adb5bd;
  transition: background 0.2s, color 0.2s;
}
.domain-step .domain-step-label {
  font-size: 11px;
  font-weight: 600;
  color: #adb5bd;
  white-space: nowrap;
  transition: color 0.2s;
}
.domain-step.active .domain-step-icon {
  background: #348fe2;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(52, 143, 226, 0.15);
}
.domain-step.active .domain-step-label {
  color: #348fe2;
}
.domain-step.active.warning .domain-step-icon {
  background: #ffc107;
  color: #000;
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2);
}
.domain-step.active.warning .domain-step-label {
  color: #d39e00;
}
.domain-step.done .domain-step-icon {
  background: #28a745;
  color: #fff;
}
.domain-step.done .domain-step-label {
  color: #28a745;
}

.domain-step-line {
  flex: 1;
  height: 2px;
  background: #e9ecef;
  margin: 0 8px;
  margin-bottom: 16px;
  border-radius: 2px;
  transition: background 0.2s;
}
.domain-step-line.done {
  background: #28a745;
}

@media (min-width: 767.98px) {
  .navbar-nav > li > a {
    padding: 0px 5px;
  }
}
@media print {
  @page {
    margin: 0;
  }
  body {
    font-size: 100%;
  }
  body .invoice {
    padding: 10px;
  }
  .print-hide,
  .btn-white,
  #footer,
  .breadcrumb,
  .app-header,
  #sidebar,
  .app-sidebar,
  h1.page-header,
  .spinner,
  #loader,
  .app-loader,
  .pace-activity {
    display: none !important;
  }
  /*.print-section {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     z-index: 9999;
     width: 100%;
     background-color: #ffffff;
   }*/
}
.print.invoice .invoice-col span.text-white {
  font-size: 14px;
  border-radius: 7px;
  padding: 0 15px;
}

.marketing-campaigns-form .is-invalid {
  border-color: #ff2121 !important;
}

.campaigns-conditions .condition-item > .col-sm-12 > .d-flex {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}
.campaigns-conditions #uploadBtn {
  margin: 0 !important;
}
.campaigns-conditions .condition-item label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  text-align: start;
}
.campaigns-conditions .condition-value .selected-value:empty {
  display: none;
}
.campaigns-conditions .condition-item > [class*=col-] {
  padding-inline: 8px !important;
}
.campaigns-conditions .select2-container {
  width: 100% !important;
}
.campaigns-conditions .select2-container--default .select2-selection--multiple {
  min-height: 40px !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.campaigns-conditions .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
}
.campaigns-conditions .select2-container--default .select2-selection--multiple .select2-selection__choice {
  height: auto !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  background: rgba(52, 143, 226, 0.1) !important;
  border: 1px solid rgba(52, 143, 226, 0.22) !important;
  border-radius: 5px !important;
  color: #348fe2 !important;
  font-size: 12px;
}
.campaigns-conditions .select2-container--default .select2-selection--multiple .select2-search__field {
  min-height: auto !important;
  margin-top: 0 !important;
}

.messages-form .campaigns-conditions {
  margin-top: 18px;
}

.campaign-conditions {
  padding: 35px;
  background-color: #f0f8ff;
  border-radius: 8px;
  border: 1px dashed #8e9eb3;
}
.campaign-conditions h4 {
  margin-top: 0;
  font-weight: bold;
  margin-bottom: 20px;
}
.campaign-conditions .conditions_container div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.campaign-conditions .conditions_container div h5 {
  margin: 0;
}
.campaign-conditions .conditions_container div span.btn {
  width: 35px;
  height: 35px;
  background-color: #ffdfdf;
  color: #993c37;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.campaign-conditions .conditions_container div span.btn:hover {
  background-color: #ff5b57;
  color: #fff;
}
.campaign-conditions .conditions_container hr {
  margin: 10px 0;
}

.pi button {
  height: auto;
  overflow: visible;
  float: none;
}
.pi .fs-topbar {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e6edf3;
}
.pi .fs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  color: #348fe2;
  background: rgba(52, 143, 226, 0.1);
  border-radius: 9px;
  padding: 11px 22px;
  transition: background 0.15s;
}
.pi .fs-back i {
  font-size: 13px;
}
.pi .fs-back:hover {
  background: rgba(52, 143, 226, 0.18);
  color: #348fe2;
}
.pi .pi-wizard {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: flex;
  border-radius: 24px;
  box-shadow: 0 40px 90px -20px rgba(19, 27, 46, 0.14);
  overflow: hidden;
  min-height: 520px;
}
.pi .pi-side {
  width: 280px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.pi .pi-brand {
  margin-bottom: 44px;
}
.pi .pi-brand h1 {
  font-size: 22px;
  font-weight: 800;
  color: #2d353c;
  margin: 0;
}
.pi .pi-brand p {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #939393;
  margin: 4px 0 0;
}
.pi .pi-stepper {
  display: flex;
  flex-direction: column;
}
.pi .pi-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  padding-bottom: 24px;
}
.pi .pi-step:not(:last-child) .pi-step-dot::after {
  content: "";
  position: absolute;
  top: 40px;
  right: 19px;
  width: 2px;
  height: calc(100% - 16px);
  background: #e4e2e4;
}
.pi .pi-step-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e4e2e4;
  color: #939393;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}
.pi .pi-step-dot i {
  font-size: 15px;
}
.pi .pi-step-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
}
.pi .pi-step-label {
  font-size: 14px;
  font-weight: 600;
  color: #939393;
}
.pi .pi-step-sub {
  font-size: 11px;
  color: #b6b7bd;
}
.pi .pi-step.is-active .pi-step-dot {
  background: #348fe2;
  color: #fff;
  box-shadow: 0 8px 18px rgba(52, 143, 226, 0.35);
}
.pi .pi-step.is-active .pi-step-label {
  color: #348fe2;
  font-weight: 700;
}
.pi .pi-step.is-done .pi-step-dot {
  background: #22c55e;
  color: #fff;
}
.pi .pi-step.is-done .pi-step-dot::after {
  background: #22c55e;
}
.pi .pi-main {
  flex: 1;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pi .pi-pane {
  display: none;
  animation: piFade 0.4s ease;
}
.pi .pi-pane.is-active {
  display: block;
}
.pi .pi-step1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.pi .pi-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: #dae2fd;
  color: #004395;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.pi .pi-title {
  font-size: 34px;
  font-weight: 800;
  color: #2d353c;
  line-height: 1.25;
  margin: 0 0 16px;
}
.pi .pi-desc {
  font-size: 15px;
  line-height: 1.9;
  color: #45464d;
  max-width: 460px;
  margin: 0 0 24px;
}
.pi .pi-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.pi .pi-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #2d353c;
}
.pi .pi-feature-ic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(52, 143, 226, 0.12);
  color: #348fe2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.pi .pi-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 40px;
  border-radius: 16px;
  text-decoration: none;
  align-self: flex-start;
  background: linear-gradient(180deg, #4a9de8, #348fe2);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 16px 30px -8px rgba(52, 143, 226, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pi .pi-cta:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -8px rgba(52, 143, 226, 0.6);
}
.pi .pi-cta:active {
  transform: scale(0.98);
}
.pi .pi-graphic {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pi .pi-graphic-cloud {
  width: 180px;
  height: 180px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 30px 60px -20px rgba(52, 143, 226, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(52, 143, 226, 0.45);
  font-size: 84px;
  transform: rotate(8deg);
  animation: piFloat 10s ease-in-out infinite;
}
.pi .pi-graphic-chip {
  position: absolute;
  border-radius: 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px -10px rgba(19, 27, 46, 0.4);
  animation: piFloat 8s ease-in-out infinite;
}
.pi .pi-graphic-chip--1 {
  top: 30px;
  right: 30px;
  width: 84px;
  height: 84px;
  background: #348fe2;
  font-size: 34px;
  transform: rotate(-12deg);
}
.pi .pi-graphic-chip--2 {
  bottom: 40px;
  left: 30px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #131b2e;
  font-size: 26px;
  animation-delay: 1.5s;
}
.pi .pi-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #348fe2;
  filter: blur(1px);
  opacity: 0;
  animation: piDataFlow 3s linear infinite;
}
.pi .pi-particle--1 {
  top: 70%;
  left: 80%;
  animation-delay: 0s;
}
.pi .pi-particle--2 {
  top: 60%;
  left: 90%;
  animation-delay: 1s;
}
.pi .pi-particle--3 {
  top: 80%;
  left: 70%;
  animation-delay: 2s;
}
.pi .pi-particle--4 {
  top: 75%;
  left: 60%;
  animation-delay: 0.5s;
}
.pi .pi-upload-head {
  text-align: center;
  margin-bottom: 28px;
}
.pi .pi-upload-head .pi-title {
  font-size: 28px;
  margin-bottom: 8px;
}
.pi .pi-upload-head .pi-desc {
  margin: 0 auto;
}
.pi .pi-upload-ic {
  width: 84px;
  height: 84px;
  border-radius: 28px;
  margin: 0 auto 18px;
  background: #dae2fd;
  color: #348fe2;
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.6);
}
.pi .pi-dropzone {
  border: 2px dashed rgba(52, 143, 226, 0.3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: 24px;
}
.pi .pi-dropzone:hover, .pi .pi-dropzone.is-drag {
  border-color: #348fe2;
  background: rgba(52, 143, 226, 0.06);
}
.pi .pi-dropzone-ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: rgba(52, 143, 226, 0.12);
  color: #348fe2;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
}
.pi .pi-dropzone:hover .pi-dropzone-ic {
  transform: scale(1.1);
}
.pi .pi-dropzone-title {
  font-size: 19px;
  font-weight: 700;
  color: #2d353c;
  margin: 0 0 6px;
}
.pi .pi-dropzone-sub {
  font-size: 14px;
  color: #45464d;
  margin: 0 0 22px;
}
.pi .pi-formats {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.pi .pi-format {
  padding: 6px 16px;
  border-radius: 8px;
  background: #dae2fd;
  color: #004395;
  font-size: 12px;
  font-weight: 700;
}
.pi .pi-hidden {
  display: none !important;
}
.pi .pi-file-info {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(52, 143, 226, 0.06);
  border: 1px solid rgba(52, 143, 226, 0.15);
  padding: 16px;
  border-radius: 14px;
  margin-bottom: 24px;
}
.pi .pi-file-info i {
  font-size: 26px;
  color: #16a34a;
}
.pi .pi-file-info .pi-file-details h5 {
  margin: 0 0 3px;
  font-size: 15px;
  color: #2d353c;
}
.pi .pi-file-info .pi-file-details p {
  margin: 0;
  font-size: 13px;
  color: #45464d;
}
.pi .pi-file-info .pi-file-change {
  margin-inline-start: auto;
  background: none;
  border: none;
  padding: 0;
  color: #348fe2;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pi .pi-file-info .pi-file-change:hover {
  text-decoration: underline;
}
.pi .pi-error-msg {
  color: #ba1a1a;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.pi .pi-instructions {
  background: rgba(52, 143, 226, 0.06);
  border-right: 4px solid #348fe2;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 26px;
}
.pi .pi-instructions h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #348fe2;
  margin: 0 0 14px;
}
.pi .pi-instructions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pi .pi-instructions li {
  position: relative;
  padding-right: 20px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #083053;
}
.pi .pi-instructions li::before {
  content: "•";
  position: absolute;
  right: 0;
  color: #348fe2;
  font-size: 18px;
  line-height: 1;
}
.pi .pi-instructions li:last-child {
  margin-bottom: 0;
}
.pi .pi-actions {
  display: flex;
  gap: 16px;
}
.pi .pi-back-btn {
  flex: 1;
  padding: 15px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(52, 143, 226, 0.3);
  background: transparent;
  color: #348fe2;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.15s;
}
.pi .pi-back-btn:hover {
  background: rgba(52, 143, 226, 0.06);
}
.pi .pi-submit {
  flex: 2;
  padding: 15px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #4a9de8, #348fe2);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 14px 28px -8px rgba(52, 143, 226, 0.5);
}
.pi .pi-submit:hover {
  transform: translateY(-2px);
}
.pi .pi-submit:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}
.pi .pi-results {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pi .pi-pane--review .pi-summary, .pi .pi-pane--review .pi-errors {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.65);
}
.pi .pi-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pi .pi-results-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pi .pi-results-brand h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #2d353c;
}
.pi .pi-results-brand p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #45464d;
}
.pi .pi-results-brand-ic {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #348fe2;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pi .pi-results-actions {
  display: flex;
  gap: 12px;
}
.pi .pi-refresh {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 10px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #2d353c;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pi .pi-refresh:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #2d353c;
  text-decoration: none;
}
.pi .pi-new-import {
  padding: 10px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: #131b2e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(19, 27, 46, 0.2);
}
.pi .pi-new-import:hover {
  opacity: 0.9;
}
.pi .pi-summary {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
}
.pi .pi-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.pi .pi-summary-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #2d353c;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pi .pi-summary-head h2 i {
  color: #348fe2;
}
.pi .pi-chip {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.pi .pi-chip--pending {
  background: rgba(52, 143, 226, 0.12);
  color: #348fe2;
}
.pi .pi-chip--done {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}
.pi .pi-chip--failed {
  background: rgba(186, 26, 26, 0.12);
  color: #ba1a1a;
}
.pi .pi-stat {
  display: inline-block;
  min-width: 200px;
  padding: 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.pi .pi-stat .pi-stat-label {
  margin: 0 0 6px;
  font-size: 14px;
  color: #45464d;
}
.pi .pi-stat .pi-stat-value {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  color: #2d353c;
}
.pi .pi-stat .pi-stat-value.is-error {
  color: #ba1a1a;
}
.pi .pi-stat .pi-stat-value.is-ok {
  color: #15803d;
}
.pi .pi-processing {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #45464d;
  margin: 0;
}
.pi .pi-spinner {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 3px solid rgba(52, 143, 226, 0.25);
  border-top-color: #348fe2;
  border-radius: 50%;
  animation: piSpin 1s linear infinite;
}
.pi .pi-errors {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
}
.pi .pi-errors-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
}
.pi .pi-errors-head i {
  color: #ba1a1a;
  font-size: 18px;
}
.pi .pi-errors-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #2d353c;
}
.pi .pi-errors-table-wrap {
  overflow-x: auto;
}
.pi .pi-errors-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
}
.pi .pi-errors-table th {
  padding: 16px 28px;
  font-size: 13px;
  font-weight: 600;
  color: #45464d;
  background: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.pi .pi-errors-table td {
  padding: 18px 28px;
  font-size: 14px;
  color: #2d353c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.pi .pi-errors-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.35);
}
.pi .pi-errors-table tbody tr:last-child td {
  border-bottom: none;
}
.pi .pi-errors-table .pi-row-num {
  font-family: monospace;
  color: #45464d;
}
.pi .pi-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ba1a1a;
  margin-left: 8px;
}
.pi .pi-errors-empty {
  padding: 40px 28px;
  text-align: center;
  color: #15803d;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.pi .pi-errors-empty i {
  margin-left: 8px;
}
.pi .pi-errors-empty.is-error {
  color: #ba1a1a;
}
@keyframes piFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes piSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes piFloat {
  0%, 100% {
    transform: translateY(0) rotate(8deg);
  }
  50% {
    transform: translateY(-20px) rotate(6deg);
  }
}
@keyframes piDataFlow {
  0% {
    transform: translate(100px, 100px);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-100px, -150px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pi .pi-graphic-cloud, .pi .pi-graphic-chip, .pi .pi-pane {
    animation: none;
  }
  .pi .pi-particle {
    animation: none;
    opacity: 0.6;
  }
}
@media (max-width: 991px) {
  .pi .pi-wizard {
    flex-direction: column;
  }
  .pi .pi-side {
    width: auto;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  .pi .pi-brand {
    margin-bottom: 24px;
  }
  .pi .pi-stepper {
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
  }
  .pi .pi-step {
    padding-bottom: 0;
  }
  .pi .pi-step:not(:last-child) .pi-step-dot::after {
    display: none;
  }
  .pi .pi-main {
    padding: 32px 24px;
  }
  .pi .pi-step1 {
    grid-template-columns: 1fr;
  }
  .pi .pi-graphic {
    display: none;
  }
  .pi .pi-title {
    font-size: 26px;
  }
}

/* start main colors variables */
/* end colors variables */
.pe-edit.feature-show:has(.deposit-form-card) .fs-card-head__title {
  display: none;
}
.pe-edit.feature-show:has(.deposit-form-card) .fs-description, .pe-edit.feature-show:has(.deposit-form-card) .fs-wiki, .pe-edit.feature-show:has(.deposit-form-card) .fs-divider {
  display: none;
}
.pe-edit.feature-show:has(.deposit-form-card) .fs-card {
  background: transparent;
  box-shadow: none;
  border: 0;
}
.pe-edit.feature-show:has(.deposit-form-card) .fs-card::before {
  display: none;
}
.pe-edit.feature-show:has(.deposit-form-card) .pe-card-body {
  padding: 0;
}
.pe-edit.feature-show:has(.deposit-form-card) .pe-card-head {
  max-width: 560px;
  margin: 0 auto 10px;
  padding: 0;
}
.pe-edit.feature-show:has(.deposit-form-card) .pe-status {
  padding: 5px 14px;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.deposit-form-card {
  max-width: 560px;
  margin: 6px auto 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09);
}
.deposit-form-card__header {
  position: relative;
  padding: 24px 28px 40px;
  background: linear-gradient(135deg, #1368b0 0%, #348fe2 55%, #64aff0 100%);
  overflow: hidden;
}
.deposit-form-card__header::before {
  content: "\f53a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  font-size: 130px;
  color: rgba(255, 255, 255, 0.06);
  left: -15px;
  bottom: -24px;
  line-height: 1;
  pointer-events: none;
}
.deposit-form-card__header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: #fff;
  border-radius: 22px 22px 0 0;
}
.deposit-form-card__header h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
}
.deposit-form-card__header p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  margin: 0;
  max-width: 360px;
  position: relative;
  z-index: 1;
}
.deposit-form-card__body {
  background: #fff;
  padding: 28px 28px 0;
}
.deposit-form-card__footer {
  padding: 20px 0 28px;
  text-align: center;
}

.deposit-method-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 576px) {
  .deposit-method-cards {
    grid-template-columns: 1fr;
  }
}

.deposit-method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  gap: 8px;
  user-select: none;
  margin: 0;
}
.deposit-method-card:hover {
  border-color: #87c3f3;
  box-shadow: 0 4px 14px rgba(52, 143, 226, 0.12);
  transform: translateY(-2px);
}
.deposit-method-card .deposit-method-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.deposit-method-card__check {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #348fe2;
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.deposit-method-card__icon {
  font-size: 26px;
  color: #b0bec5;
  transition: color 0.2s;
}
.deposit-method-card__label {
  font-size: 13px;
  font-weight: 700;
  color: #2d353c;
}
.deposit-method-card__hint {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
}
.deposit-method-card.is-active {
  border-color: #348fe2;
  background: #e0f0fc;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.14);
}
.deposit-method-card.is-active .deposit-method-card__check {
  opacity: 1;
}
.deposit-method-card.is-active .deposit-method-card__icon {
  color: #348fe2;
}

.deposit-value-wrap {
  text-align: center;
  margin-bottom: 8px;
}
.deposit-value-wrap__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 3px;
}
.deposit-value-wrap__hint {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 12px;
}

.deposit-value-input-wrap {
  display: inline-flex;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.deposit-value-input-wrap:focus-within {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.12);
}
.deposit-value-input-wrap__unit {
  background: #f3f4f6;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #6b7280;
  display: flex;
  align-items: center;
  border-left: 2px solid #e5e7eb;
  flex-shrink: 0;
  min-width: 52px;
  justify-content: center;
}

.deposit-value-input {
  border: none;
  outline: none;
  font-size: 26px;
  font-weight: 700;
  color: #2d353c;
  width: 140px;
  padding: 10px 16px;
  text-align: center;
  background: #fff;
}
.deposit-value-input.is-invalid-val {
  color: #dc2626;
}
.deposit-value-input::-webkit-outer-spin-button, .deposit-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.deposit-value-input[type=number] {
  -moz-appearance: textfield;
}

.deposit-value-warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 7px 14px;
  margin-top: 10px;
}

.deposit-form-card__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.deposit-form-btn {
  background: linear-gradient(135deg, #1c74cc, #348fe2);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 40px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(52, 143, 226, 0.35);
}
.deposit-form-btn:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(52, 143, 226, 0.4);
}
.deposit-form-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*end pages style*/
/*start widgets style*/
.form-check.form-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.form-check.form-switch .form-check-input {
  flex-shrink: 0;
  width: 2.1em;
  height: 1.1em;
  margin: 0;
  float: none;
  cursor: pointer;
  background-color: #cdd5df;
  border-color: #cdd5df;
  background-position: right center;
  box-shadow: none;
  transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.form-check.form-switch .form-check-input:focus {
  border-color: #348fe2;
  box-shadow: 0 0 0 3px rgba(52, 143, 226, 0.18);
}
.form-check.form-switch .form-check-input:checked {
  background-color: #348fe2;
  border-color: #348fe2;
  background-position: left center;
}
.form-check.form-switch .form-check-input:disabled, .form-check.form-switch .form-check-input[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ltr .form-check.form-switch .form-check-input {
  background-position: left center;
}
.ltr .form-check.form-switch .form-check-input:checked {
  background-position: right center;
}

.page-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-header {
  display: inline-flex;
}
.card-header .card-title {
  display: inline-flex;
  align-items: center;
}
.card-header .card-title .label {
  height: 34px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.card-header .card-title .label span {
  margin: 0 3px;
}
.card-header .card-title .label svg, .card-header .card-title .label i {
  display: none;
}

@media (max-width: 567px) {
  .page-header {
    padding: 0 10px;
  }
}
.contac-button {
  background-color: #348fe2;
  color: #fff;
  width: 130px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 30px;
  font-size: 20px;
}
.contac-button:hover {
  background-color: #2d353c;
  color: #fff;
  text-decoration: none;
}

.btn-global {
  padding: 0 20px;
  height: 45px;
  display: inline-block;
  margin: 15px 0 10px;
  border: none;
  overflow: hidden;
}

.btn-head {
  background: #fff;
  color: #348fe2 !important;
  font-size: 1.2rem;
  padding: 0.7rem 1.55rem;
  text-decoration: none;
  border-radius: 10px;
}
.btn-head:hover {
  background-color: #2d353c !important;
  color: #fff !important;
  text-decoration: none;
}

button {
  height: 40px;
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  float: left;
  margin: inherit;
}
button span {
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  height: 45px;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}
button div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 45px;
  background-color: #2d353c;
}
button div svg, button div i {
  font-size: 20px;
}

#deleteCoupon {
  background: none;
  border: 1px solid #c6cdd9;
  height: 25px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0 10px;
  gap: 3px;
  margin: 0;
  color: #475264;
}
#deleteCoupon span {
  height: initial;
  padding: initial;
  font-weight: 500;
  font-size: 12px;
  color: #475264;
}
#deleteCoupon i,
#deleteCoupon svg {
  font-size: 11px;
  color: #475264;
}
#deleteCoupon:hover {
  color: #e53e3e;
  background: rgba(229, 62, 62, 0.1);
  border-color: rgba(229, 62, 62, 0.1);
}
#deleteCoupon:hover span,
#deleteCoupon:hover i,
#deleteCoupon:hover svg {
  color: #e53e3e;
}

a:disabled, a[disabled], button:disabled, button[disabled] {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}
a:disabled:hover, a[disabled]:hover, button:disabled:hover, button[disabled]:hover {
  background: none !important;
  border-color: #c6cdd9 !important;
  color: #475264 !important;
}
a:disabled:hover i,
a:disabled:hover svg, a[disabled]:hover i,
a[disabled]:hover svg, button:disabled:hover i,
button:disabled:hover svg, button[disabled]:hover i,
button[disabled]:hover svg {
  color: #475264 !important;
}

.btn-section {
  height: 45px !important;
  display: flex !important;
  margin: 10px 0 10px 0;
}
.btn-section span {
  height: 45px !important;
  padding: 0 10px !important;
}
.btn-section div {
  height: 45px !important;
  padding: 0 10px !important;
}
.btn-section div svg, .btn-section div i {
  font-size: 20px;
}

.panels-button, .cards-button {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #348fe2;
  margin: 10px 0 10px 0;
  color: #fff;
  border-radius: 10px;
  padding: 4px 15px;
}
.panels-button span, .cards-button span {
  height: 45px !important;
  padding: 0 10px !important;
}
.panels-button div, .cards-button div {
  height: 45px !important;
  padding: 0 10px !important;
}
.panels-button div svg, .panels-button div i, .cards-button div svg, .cards-button div i {
  font-size: 20px;
}
.panels-button:hover, .cards-button:hover {
  background-color: #F79737;
  color: #fff;
}

.dropdown-toggle .caret {
  padding: 0 !important;
}

/* Enhanced Dropdown */
#settings-dropdown {
  position: relative;
  display: inline-block;
}
#settings-dropdown .dropdown-btn {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  padding: 5px 15px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #1e293b;
  height: 40px;
}
#settings-dropdown .dropdown-btn span {
  padding: 0;
  height: initial;
  font-size: inherit;
}
#settings-dropdown .dropdown-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}
#settings-dropdown .dropdown-content, #settings-dropdown .dropdown-menu {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  min-width: 225px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  border-radius: 7px;
  z-index: 1000;
  top: 100%;
  left: 0;
  right: initial;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid #d0d5dd;
}
#settings-dropdown .dropdown-content.show, #settings-dropdown .dropdown-menu.show {
  display: block;
  animation: scaleIn 0.2s ease-out;
}
#settings-dropdown .dropdown-content li, #settings-dropdown .dropdown-menu li {
  border-bottom: 1px solid #e2e8f0;
}
#settings-dropdown .dropdown-content li:last-child, #settings-dropdown .dropdown-menu li:last-child {
  border-bottom: none;
}
#settings-dropdown .dropdown-content a, #settings-dropdown .dropdown-content button, #settings-dropdown .dropdown-menu a, #settings-dropdown .dropdown-menu button {
  color: #1e293b;
  padding: 10px 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  background-color: transparent;
  margin: 0 !important;
}
#settings-dropdown .dropdown-content a span, #settings-dropdown .dropdown-content button span, #settings-dropdown .dropdown-menu a span, #settings-dropdown .dropdown-menu button span {
  padding: 0;
  height: initial;
}
#settings-dropdown .dropdown-content a i, #settings-dropdown .dropdown-content a svg, #settings-dropdown .dropdown-content button i, #settings-dropdown .dropdown-content button svg, #settings-dropdown .dropdown-menu a i, #settings-dropdown .dropdown-menu a svg, #settings-dropdown .dropdown-menu button i, #settings-dropdown .dropdown-menu button svg {
  width: 17px;
  text-align: center;
}
#settings-dropdown .dropdown-content a:hover, #settings-dropdown .dropdown-content button:hover, #settings-dropdown .dropdown-menu a:hover, #settings-dropdown .dropdown-menu button:hover {
  background: #e5f3ff;
  color: #245f91;
}
#settings-dropdown .dropdown-content .dropdown-btn-delete, #settings-dropdown .dropdown-menu .dropdown-btn-delete {
  color: #B42318;
}
#settings-dropdown .dropdown-content .dropdown-btn-delete i, #settings-dropdown .dropdown-content .dropdown-btn-delete svg, #settings-dropdown .dropdown-menu .dropdown-btn-delete i, #settings-dropdown .dropdown-menu .dropdown-btn-delete svg {
  color: #B42318;
}
#settings-dropdown .dropdown-content .dropdown-btn-delete:hover, #settings-dropdown .dropdown-menu .dropdown-btn-delete:hover {
  background-color: #FEF3F2;
  color: #B42318;
}
#settings-dropdown .dropdown-content .dropdown-btn-delete:hover i, #settings-dropdown .dropdown-content .dropdown-btn-delete:hover svg, #settings-dropdown .dropdown-menu .dropdown-btn-delete:hover i, #settings-dropdown .dropdown-menu .dropdown-btn-delete:hover svg {
  color: #B42318;
}
@media (max-width: 480px) {
  #settings-dropdown .dropdown-btn {
    padding: 5px 10px;
    font-size: 12px;
    height: 35px;
  }
}

.btn-edit-modren {
  height: 30px;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: #2B70AE;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: 1s ease-in;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.btn-edit-modren:hover {
  background-color: #E6F0FF;
}

.copyMainBtn {
  background-color: transparent;
  padding: 0 !important;
  margin: 0;
  color: #718293;
  height: initial;
}
.copyMainBtn i, .copyMainBtn svg {
  font-size: 12px !important;
}
.copyMainBtn:hover {
  color: #348fe2;
}

.cover {
  position: relative;
  height: 90vh;
}
.cover .container {
  height: 100%;
  display: inline-flex;
  align-items: center;
}
.cover .img-box {
  height: 100%;
  background-image: url("../images/cover/cover.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  background-origin: content-box;
  background-clip: content-box;
}
.cover .overlay {
  background-color: rgba(37, 55, 69, 0.4705882353);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.cover .info {
  position: absolute;
  width: 55%;
}
.cover .info h2 {
  width: 80%;
  color: #fff;
  font-size: 55px;
  font-weight: bold;
}
.cover .info p {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
  max-height: 55px;
  overflow: hidden;
  line-height: 1.3;
  margin-top: 20px;
}
@media (max-width: 767.98px) {
  .cover {
    height: 40vh;
  }
  .cover .info {
    width: 95%;
    padding: 15px;
  }
  .cover .info h2 {
    width: 90%;
    font-size: 35px;
  }
  .cover .info p {
    font-size: 16px;
    max-height: 70px;
    margin-top: 20px;
    line-height: 1.5;
  }
}

.rtl .cover {
  position: relative;
  height: 90vh;
}
.rtl .cover .container {
  height: 100%;
  display: inline-flex;
  align-items: center;
}
.rtl .cover .img-box {
  height: 100%;
  background-image: url("../images/cover/cover.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  background-origin: content-box;
  background-clip: content-box;
}
.rtl .cover .overlay {
  background-color: rgba(37, 55, 69, 0.4705882353);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.rtl .cover .info {
  position: absolute;
  width: 55%;
}
.rtl .cover .info h2 {
  width: 80%;
  color: #fff;
  font-size: 55px;
  font-weight: bold;
}
.rtl .cover .info p {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
  max-height: 55px;
  overflow: hidden;
  line-height: 1.3;
  margin-top: 20px;
}
@media (max-width: 767.98px) {
  .rtl .cover {
    height: 40vh;
  }
  .rtl .cover .info {
    width: 95%;
  }
  .rtl .cover .info h2 {
    width: 90%;
    font-size: 35px;
  }
  .rtl .cover .info p {
    font-size: 16px;
    max-height: 70px;
    margin-top: 20px;
    line-height: 1.5;
  }
}

/* ========== start img style =========== */
.img-box {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-clip: border-box;
  background-size: cover;
  background-position: center;
}
.img-box img {
  width: 100%;
  min-height: 100%;
  max-height: 120%;
}

/* ========== end img style =========== */
img.lazyload {
  display: block;
  /* optional way, set loading as background */
  background-image: url("../images/spinner.gif");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.img-logo {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 0 5px;
  background-color: #333;
}

#contactInfoEdit .modal-content .modal-header .title-container, #shippingInfoEdit .modal-content .modal-header .title-container, .deleteModal .modal-content .modal-header .title-container, .custom-modal .modal-content .modal-header .title-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
#contactInfoEdit .modal-content .modal-header .title-container #backButton button, #shippingInfoEdit .modal-content .modal-header .title-container #backButton button, .deleteModal .modal-content .modal-header .title-container #backButton button, .custom-modal .modal-content .modal-header .title-container #backButton button {
  width: 30px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #e3f2ff;
}
#contactInfoEdit .modal-content .modal-footer, #shippingInfoEdit .modal-content .modal-footer, .deleteModal .modal-content .modal-footer, .custom-modal .modal-content .modal-footer {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}
#contactInfoEdit .modal-content .modal-footer form, #shippingInfoEdit .modal-content .modal-footer form, .deleteModal .modal-content .modal-footer form, .custom-modal .modal-content .modal-footer form {
  display: flex !important;
  gap: 10px;
}
#contactInfoEdit .modal-content .modal-footer form button, #shippingInfoEdit .modal-content .modal-footer form button, .deleteModal .modal-content .modal-footer form button, .custom-modal .modal-content .modal-footer form button {
  width: 100%;
  height: 45px !important;
  border-radius: 7px !important;
}
#contactInfoEdit .modal-content .modal-footer button, #contactInfoEdit .modal-content .modal-footer a, #shippingInfoEdit .modal-content .modal-footer button, #shippingInfoEdit .modal-content .modal-footer a, .deleteModal .modal-content .modal-footer button, .deleteModal .modal-content .modal-footer a, .custom-modal .modal-content .modal-footer button, .custom-modal .modal-content .modal-footer a {
  flex: 1;
  height: 45px;
  border-radius: 8px;
  justify-content: center;
  border: 1px solid;
}
#contactInfoEdit .modal-content .modal-footer .btn.btn-default, #shippingInfoEdit .modal-content .modal-footer .btn.btn-default, .deleteModal .modal-content .modal-footer .btn.btn-default, .custom-modal .modal-content .modal-footer .btn.btn-default {
  color: #000;
  background: transparent;
  border-color: #b6c2c9;
}
#contactInfoEdit .modal-content .modal-footer .btn.btn-default:hover, #shippingInfoEdit .modal-content .modal-footer .btn.btn-default:hover, .deleteModal .modal-content .modal-footer .btn.btn-default:hover, .custom-modal .modal-content .modal-footer .btn.btn-default:hover {
  background-color: transparent;
  font-weight: bold;
}

#shippingInfoEdit .address-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #939393;
  letter-spacing: 0.02em;
  margin: 10px 0 8px;
}
#shippingInfoEdit .address-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #edf0f4;
}
#shippingInfoEdit .address-card {
  display: block;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
#shippingInfoEdit .address-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
}
#shippingInfoEdit .address-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  text-align: start;
}
#shippingInfoEdit .address-card__name {
  font-size: 14px;
  font-weight: 700;
  color: #37414b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
#shippingInfoEdit .address-card__sublabel {
  font-size: 11.5px;
  color: #939393;
  font-weight: 500;
}
#shippingInfoEdit .address-card__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: #348fe2;
  background: rgba(52, 143, 226, 0.07);
  border: 1.5px solid rgba(52, 143, 226, 0.15);
  padding: 0 10px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}
#shippingInfoEdit .address-card__edit-btn i {
  font-size: 10px;
}
#shippingInfoEdit .address-card__edit-btn:hover {
  background: #348fe2;
  border-color: #348fe2;
  color: #fff;
  box-shadow: 0 3px 10px rgba(52, 143, 226, 0.3);
}
#shippingInfoEdit .address-card__body {
  padding: 0 14px 16px;
}
#shippingInfoEdit .address-card__city {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #37414b;
  margin-bottom: 5px;
}
#shippingInfoEdit .address-card__city i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  background: rgba(52, 143, 226, 0.1);
  color: #348fe2;
  font-size: 11px;
  border-radius: 6px;
}
#shippingInfoEdit .address-card__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 32px;
}
#shippingInfoEdit .address-card__detail {
  font-size: 12px;
  color: #939393;
  line-height: 1.6;
}
#shippingInfoEdit .address-card__detail:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
  opacity: 0.4;
}
#shippingInfoEdit .address-card__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
#shippingInfoEdit .address-card__radio-indicator {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c8d0da;
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  pointer-events: none;
}
#shippingInfoEdit .address-card__radio-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #348fe2;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#shippingInfoEdit .address-card--active {
  border: 1.5px solid rgba(52, 143, 226, 0.18);
  background: linear-gradient(175deg, rgba(52, 143, 226, 0.05) 0%, #fff 55%);
  box-shadow: 0 4px 24px rgba(52, 143, 226, 0.11), 0 1px 4px rgba(0, 0, 0, 0.04);
}
#shippingInfoEdit .address-card--active .address-card__header {
  border-bottom: 1px solid rgba(52, 143, 226, 0.08);
}
#shippingInfoEdit .address-card--active .address-card__body {
  padding: 12px 14px 16px;
}
#shippingInfoEdit .address-card--active::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(to left, rgba(52, 143, 226, 0.45), #348fe2);
}
#shippingInfoEdit .address-card--selectable {
  border: 1.5px solid #edf0f4;
  background: #fff;
  cursor: pointer;
}
#shippingInfoEdit .address-card--selectable .address-card__body {
  padding: 14px;
  padding-inline-end: 44px;
}
#shippingInfoEdit .address-card--selectable:hover {
  border-color: rgba(52, 143, 226, 0.4);
  background: rgba(52, 143, 226, 0.025);
  box-shadow: 0 4px 16px rgba(52, 143, 226, 0.09);
  transform: translateY(-1px);
}
#shippingInfoEdit .address-card--selectable:hover .address-card__city {
  color: #348fe2;
}
#shippingInfoEdit .address-card--selectable:hover .address-card__radio-indicator {
  border-color: rgba(52, 143, 226, 0.5);
}
#shippingInfoEdit .address-card--selectable:has(input:checked) {
  border-color: #348fe2;
  background: rgba(52, 143, 226, 0.04);
  box-shadow: 0 4px 20px rgba(52, 143, 226, 0.12);
}
#shippingInfoEdit .address-card--selectable:has(input:checked) .address-card__radio-indicator {
  border-color: #348fe2;
}
#shippingInfoEdit .address-card--selectable:has(input:checked) .address-card__radio-indicator::after {
  transform: translate(-50%, -50%) scale(1);
}
#shippingInfoEdit .address-card--selectable:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 575.98px) {
  #shippingInfoEdit .address-card {
    border-radius: 10px;
  }
  #shippingInfoEdit .address-card__header {
    padding: 11px 12px;
  }
  #shippingInfoEdit .address-card__name {
    font-size: 13.5px;
  }
  #shippingInfoEdit .address-card__edit-btn {
    padding: 5px 10px;
    font-size: 11.5px;
  }
  #shippingInfoEdit .address-card__body {
    padding: 0 12px 12px;
  }
  #shippingInfoEdit .address-card--active .address-card__body {
    padding: 10px 12px 12px;
  }
  #shippingInfoEdit .address-card--selectable .address-card__body {
    padding: 12px;
    padding-inline-end: 40px;
  }
  #shippingInfoEdit .address-card__city {
    font-size: 13.5px;
    gap: 7px;
  }
  #shippingInfoEdit .address-card__city i {
    width: 22px;
    min-width: 22px;
    height: 22px;
    font-size: 10px;
  }
  #shippingInfoEdit .address-card__details {
    padding-inline-start: 29px;
  }
  #shippingInfoEdit .address-card__detail {
    font-size: 11.5px;
  }
}
#shippingInfoEdit #newAddressForm .form-group label,
#shippingInfoEdit #editForm .form-group label {
  display: block;
  margin-bottom: 5px;
  text-align: start !important;
  font-size: 12px;
  font-weight: 600;
}
#shippingInfoEdit .address-action-row {
  display: flex;
  gap: 7px;
  align-items: stretch;
  margin-top: 14px;
  margin-bottom: 14px;
}
#shippingInfoEdit .address-action-row > .btn {
  flex: 1;
  margin: 0;
}
#shippingInfoEdit .btn-save-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #348fe2;
  border: 1.5px solid #348fe2;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
#shippingInfoEdit .btn-save-address i {
  font-size: 14px;
}
#shippingInfoEdit .btn-save-address:hover:not(:disabled) {
  background: rgb(29.65, 122.6896551724, 207.55);
  border-color: rgb(29.65, 122.6896551724, 207.55);
  box-shadow: 0 3px 12px rgba(52, 143, 226, 0.35);
}
#shippingInfoEdit .btn-save-address:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
#shippingInfoEdit .btn-add-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #348fe2;
  border: 1.5px dashed rgba(52, 143, 226, 0.3);
  background: transparent;
  margin-top: 6px;
  margin-bottom: 14px;
  transition: all 0.18s ease;
}
#shippingInfoEdit .btn-add-address i {
  font-size: 14px;
}
#shippingInfoEdit .btn-add-address:hover {
  border-color: #348fe2;
  background: rgba(52, 143, 226, 0.04);
  box-shadow: 0 2px 10px rgba(52, 143, 226, 0.08);
}
.address-action-row #shippingInfoEdit .btn-add-address {
  margin: 0;
}
#shippingInfoEdit .modal-content .modal-body {
  padding: 0 !important;
}
#shippingInfoEdit .modal-content .modal-body .col-xs-12 {
  padding: 0 3px;
}
#shippingInfoEdit .modal-content .modal-body .col-xs-12 .form-group {
  margin-bottom: 15px !important;
}
@media (max-width: 575.98px) {
  #shippingInfoEdit .modal-content .modal-body .col-xs-12 {
    padding: 0;
  }
}

.modal {
  backdrop-filter: blur(8px);
  background-color: rgba(31, 36, 43, 0.43);
}
.modal .close {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  position: absolute;
  z-index: 40;
  top: 15px;
  left: 15px;
  font-size: 12px;
  opacity: 1;
  margin: 0 !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
  /*
  background-color: #f15e5e;
  */
}
.modal .close svg, .modal .close i {
  color: #888b96;
  font-size: 18px;
}
.modal .close:hover, .modal .close:focus {
  opacity: 1 !important;
  background-color: #eee;
}
.modal .close span {
  height: inherit !important;
  padding: inherit !important;
}
.modal .modal-dialog.modal-small {
  width: 400px;
}
.modal .modal-content {
  border-radius: 12px;
  padding: 20px;
}
.modal .modal-content .modal-header {
  padding: 0 0 15px 0;
  /*display: block !important;*/
}
.modal .modal-content .modal-header .modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.modal .modal-content .modal-header h4 {
  margin-top: 0;
}
.modal .modal-content .modal-body {
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: #3a3a3a;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal .modal-content .modal-body .form-group .form-control {
  color: #2b3844;
}
.modal .modal-content .modal-footer {
  padding: 20px 0 0;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.modal .modal-content .modal-footer form {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.modal .modal-content .modal-footer a, .modal .modal-content .modal-footer button {
  padding: 0 15px;
  flex: 1 1 0;
  height: 40px;
  border-radius: 8px;
  border: 1px solid;
  font-weight: 600;
}
.modal .modal-content .modal-footer a {
  margin: 0 5px;
}
.modal .modal-content .modal-footer .btn.btn-default {
  border-color: #8691a2;
  color: #64748b;
  background-color: transparent;
}
.modal .modal-content .modal-footer .btn.btn-default:hover {
  background-color: #d8e5ee;
  border-color: #d8e5ee;
}
.modal .modal-content .trigger-btn {
  display: inline-block;
  margin: 100px auto;
}
.modal .modal-content button:focus {
  outline: none !important;
}
.modal .modal-content .button:focus {
  outline: none !important;
}
.modal .error-message {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 15px;
  display: none; /* مخفية افتراضيًا */
  font-size: 14px;
}

#contactInfoEdit .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
}
#contactInfoEdit .modal-title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#contactInfoEdit .modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #37414b;
  margin: 0;
  line-height: 1.3;
}
#contactInfoEdit .modal-subtitle {
  font-size: 12.5px;
  color: #939393;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
}
#contactInfoEdit .close {
  flex-shrink: 0;
  margin-top: 2px;
}
#contactInfoEdit .title-container {
  flex: 1;
  min-width: 0;
  align-items: flex-start;
}
#contactInfoEdit #contactBackButton button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(52, 143, 226, 0.08);
  border: none;
  border-radius: 50%;
  color: #348fe2;
  font-size: 13px;
  transition: background 0.15s;
}
#contactInfoEdit #contactBackButton button:hover {
  background: rgba(52, 143, 226, 0.16);
}
#contactInfoEdit .btn-customer-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  margin-top: 10px;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
#contactInfoEdit .btn-customer-action i {
  font-size: 12px;
  flex-shrink: 0;
}
#contactInfoEdit #replaceCustomerBtn.btn-customer-action {
  border: 1px dashed rgba(147, 147, 147, 0.6);
  color: #939393;
}
#contactInfoEdit #replaceCustomerBtn.btn-customer-action:hover {
  background: rgba(147, 147, 147, 0.06);
  border-color: #939393;
}
#contactInfoEdit #addNewCustomerBtn.btn-customer-action {
  border: 1px dashed rgba(52, 143, 226, 0.35);
  color: #348fe2;
}
#contactInfoEdit #addNewCustomerBtn.btn-customer-action:hover {
  background: rgba(52, 143, 226, 0.05);
  border-color: rgba(52, 143, 226, 0.6);
}
#contactInfoEdit .form-group label {
  display: block;
  text-align: start;
  margin-bottom: 5px;
}

.modal-confirm {
  color: #636363;
  min-width: 280px;
  display: flex;
  align-items: center;
  height: 100vh;
}
.modal-confirm .modal-content {
  padding: 20px;
  border-radius: 5px;
  border: none;
  text-align: center;
  font-size: 14px;
}
.modal-confirm .modal-content .modal-header {
  border-bottom: none;
  position: relative;
}
.modal-confirm .modal-content .modal-header h4 {
  text-align: center;
  font-size: 26px;
  margin: 30px 0 -10px;
}
@media (max-width: 575.98px) {
  .modal-confirm .modal-content .modal-header h4 {
    font-size: 20px;
    margin: 0 0 -10px;
  }
}
.modal-confirm .modal-body {
  color: #999;
}
@media (max-width: 575.98px) {
  .modal-confirm .modal-body p {
    text-align: center;
    margin-bottom: 0;
  }
}
.modal-confirm .modal-footer {
  border: none;
  text-align: center;
  border-radius: 5px;
  font-size: 13px;
  padding: 10px 15px 25px;
}
.modal-confirm .modal-footer a {
  color: #999;
}
@media (max-width: 575.98px) {
  .modal-confirm .modal-footer {
    padding: 10px 15px 0;
  }
}
.modal-confirm .btn {
  color: #fff;
  border-radius: 4px;
  background: #60c7c1;
  text-decoration: none;
  transition: all 0.4s;
  line-height: normal;
  min-width: 70px;
  border: none;
  min-height: 40px;
  border-radius: 3px;
  margin: 0 5px;
  outline: none !important;
}
.modal-confirm .btn-info {
  background: #c1c1c1;
}
.modal-confirm .btn-info:hover, .modal-confirm .btn-info:focus {
  background: #a8a8a8;
}
.modal-confirm .btn-danger {
  background: #f15e5e;
}
.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
  background: #ee3535;
}
.modal-confirm .btn-success:hover, .modal-confirm .btn-success:focus {
  background: #28a745;
}

.deleteModal .delete-icon {
  width: 100px;
  height: 100px;
  background: rgba(229, 62, 62, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  color: #e53e3e;
  font-size: 50px;
}
.deleteModal .product-name {
  font-weight: 600;
  color: #2d3748;
}
.deleteModal .modal-footer form {
  width: 100%;
}
.deleteModal {
  /* Buttons */
}
.deleteModal .btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.deleteModal .btn-cancel {
  background: #f7fafc;
  color: #4a5568;
  border: 2px solid #e2e8f0;
}
.deleteModal .btn-cancel:hover {
  background: #edf2f7;
  border-color: #cbd5e0;
}
.deleteModal .btn-confirm {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.deleteModal .btn-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.deleteModal .btn-confirm.discount-btn {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}
.deleteModal .btn-confirm.discount-btn:hover {
  box-shadow: 0 4px 12px rgba(237, 137, 54, 0.3);
}
.deleteModal .btn-delete-confirm {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  color: white;
}
.deleteModal .btn-delete-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

.modal.in {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.yt-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.yt-modal.active {
  display: flex;
}
.yt-modal .yt-modal-wrap {
  width: 100%;
  max-width: 820px;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1a1a;
}
.yt-modal .yt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #1a1a1a;
}
.yt-modal .yt-modal-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}
.yt-modal .yt-modal-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #e53e3e;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.yt-modal .yt-modal-close:hover {
  background: #c53030;
}
.yt-modal .yt-modal-inner {
  width: 100%;
  aspect-ratio: 16/9;
}
.yt-modal iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

#yalla-toast-stack {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
  pointer-events: none;
}

.yt {
  pointer-events: all;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 300px;
  padding: 12px 15px;
  border-radius: 10px;
  background: var(--yt-bg, #2ecc71);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transform: translateX(-24px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}
.yt--visible {
  transform: translateX(0);
  opacity: 1;
}
.yt--exit {
  transform: translateX(-20px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.yt__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.yt__body {
  flex: 1;
  min-width: 0;
}
.yt__msg {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}
.yt__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt__close:hover {
  color: #fff;
}
.yt__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.2);
  animation: yt-shrink linear forwards;
  animation-play-state: paused;
  transform-origin: left center;
}

@keyframes yt-shrink {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
.ImagePreviewBox {
  position: relative;
}
.ImagePreviewBox .btn.clipboard {
  position: absolute;
  top: 10px;
  right: 40px;
  background-color: #e1f4ff;
  border: 1px solid #a8b1c3;
  width: 25px;
  height: 25px;
  color: #a8b1c3;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
}
.ImagePreviewBox .btn.clipboard:hover {
  background-color: #348fe2;
  border: 1px solid #348fe2;
  color: #fff;
}

.ImagePreviewBox {
  width: 100%;
  height: 130px;
  border: 1px solid #d9d3d3;
  border-radius: 5px;
}
.ImagePreviewBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*-- End a3med saad edits --*/
.c-profile {
  padding: 5px 0 0;
  margin-bottom: 10px;
}
.c-profile .upload-area {
  display: block;
  text-align: center;
  width: 140px;
  height: 140px;
}
.c-profile .upload-area .img-box {
  width: 100%;
  height: 100%;
  border: 1px solid #eee !important;
  cursor: pointer;
  background-color: #e9eef1;
}
.c-profile .upload-area .img-box img {
  object-fit: contain;
}
.c-profile .profile-pic {
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  display: block;
}
.c-profile .file-upload {
  display: none;
}

.c-product,
.c-adverts {
  min-height: 100px;
  padding: 20px 0;
  margin-bottom: 10px;
}
.c-product .product-pic,
.c-product .adverts-pic,
.c-adverts .product-pic,
.c-adverts .adverts-pic {
  display: block;
  cursor: pointer;
  position: relative;
  margin: auto;
}
.c-product .file-upload,
.c-product .file-upload,
.c-adverts .file-upload,
.c-adverts .file-upload {
  display: none;
}

.c-product .upload-area {
  display: block;
  text-align: center;
  width: 328px;
  margin: auto;
}
.c-product .product-pic {
  width: 100%;
}

.c-adverts .upload-area {
  display: block;
  text-align: center;
  min-width: 300px;
  max-width: 100%;
  margin: auto;
  position: relative;
}
.c-adverts .adverts-pic {
  min-width: initial;
  max-height: 450px;
  max-width: 100%;
  width: auto;
}

.advert_type_image .img-box {
  padding: 20px;
  background-color: #e9eef1;
  width: 100%;
}

.c-option {
  height: 40px;
}
.c-option .upload-area {
  display: block;
  text-align: center;
  width: 55px;
  height: 40px;
  margin: auto;
}
.c-option .img-box {
  width: 55px;
  height: 40px;
  background-color: #e9eef1;
}
.c-option .option-pic {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  position: relative;
  margin: auto;
}
.c-option .file-upload {
  display: none;
}

.create-panel .img-box {
  overflow: hidden;
  width: 328px;
  max-height: 300px;
  border: 2px solid #eee;
  cursor: pointer;
  position: relative;
  margin: auto;
}
.create-panel .photo_description {
  width: 100%;
  border: 1px solid #e3e3e3;
  margin-top: 10px;
}

.c-category .upload-area {
  display: block;
  text-align: center;
  width: max-content;
  border: 1px solid rgb(218, 218, 218);
}
.c-category .category-pic {
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  display: block;
}
.c-category .file-upload {
  display: none;
}
.c-category .img-box {
  overflow: hidden;
  width: 200px;
  height: 120px;
  border: 2px solid #eee;
  cursor: pointer;
  position: relative;
  margin: auto;
  background-color: #e9eef1;
}

.c-logo .upload-area {
  display: block;
  text-align: center;
  width: 120px;
  height: 120px;
  border: 1px solid rgb(218, 218, 218);
}
.c-logo .logo-pic {
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  display: block;
}
.c-logo .file-upload {
  display: none;
}
.c-logo .img-box {
  overflow: hidden;
  width: 120px;
  height: 120px;
  border: 2px solid #eee;
  cursor: pointer;
  position: relative;
  margin: auto;
  background-color: #e9eef1;
}
.c-logo .img-box img {
  object-fit: contain;
}

@media (max-width: 767px) {
  .c-logo .img-box {
    height: 100px;
  }
}
.c-cover .logo-pic {
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  display: block;
}
.c-cover .upload-area {
  display: block;
  text-align: center;
  width: 100%;
  border: 1px solid rgb(218, 218, 218);
}
.c-cover .file-upload {
  display: none;
}
.c-cover .img-box {
  overflow: hidden;
  width: 100%;
  height: 150px;
  border: 2px solid #eee;
  cursor: pointer;
  position: relative;
  margin: auto;
  background-color: #e9eef1;
}
.c-cover .img-box img {
  object-fit: contain;
}

@media (max-width: 567px) {
  .c-product .upload-area {
    width: 100%;
  }
  .create-panel .img-box {
    width: 100%;
    height: 240px;
  }
  .photo_description {
    width: 228px;
  }
}
@media (max-width: 767px) {
  .c-cover .img-box {
    height: 120px;
  }
}
.img-box #remove-main-photo {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
}
.img-box #previewsContainer,
.img-box .dz-image-preview,
.img-box .dz-details,
.img-box img {
  width: 100%;
  height: 100%;
}

.p-image {
  color: #666666;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
.p-image svg, .p-image i {
  font-size: 1.6em;
  color: #444;
}
.p-image:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.create-panel h6 {
  color: #e3e3e3;
  background-color: rgba(56, 71, 85, 0.6196078431);
  width: 100%;
  text-align: center;
  font-weight: bold;
  height: 40px;
  margin: 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dropzone, #collapse-current {
  background: rgb(233, 238, 241);
}

@media (max-width: 567px) {
  .dropzone {
    min-height: 150px;
  }
  .dropzone .dz-default.dz-message {
    width: 100% !important;
  }
}
.main-img-dropzone .img-box {
  position: relative;
  height: 300px;
  background-color: #e9eef1;
}
.main-img-dropzone .img-box .dropzone {
  min-height: 142px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 22;
  background-color: transparent !important;
}
.main-img-dropzone .img-box .dropzone .dz-default.dz-message {
  background-position: center;
  position: initial;
  width: 100%;
  height: 130px;
  margin-left: 0;
  margin-top: 0;
  background-size: cover;
  top: initial;
  left: initial;
}
.main-img-dropzone .img-box .dropzone.dz-started .dz-message {
  display: inline;
}
.main-img-dropzone .img-box #previewsContainer .dz-remove {
  position: absolute;
  right: 15px;
  top: 15px;
  color: #fff;
  background-color: #e50808;
  z-index: 23;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.main-img-dropzone .img-box .dz-progress,
.main-img-dropzone .img-box .dz-success-mark,
.main-img-dropzone .img-box .dz-error-mark,
.main-img-dropzone .img-box .dz-error-message,
.main-img-dropzone .img-box .dz-size,
.main-img-dropzone .img-box .dz-filename {
  display: none;
}

.deletePhoto {
  position: absolute;
  top: 0;
  right: 0;
}
.deletePhoto span {
  width: 25px;
  height: 25px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
}
.deletePhoto span svg, .deletePhoto span i {
  font-size: 12px !important;
}
.deletePhoto .Remove-multiple-image {
  /*
  color: #fff;
  */
  font-size: 13px;
  padding: 0;
}

#currentImages #collapse-current .multiFiles {
  max-height: 275px;
  overflow-x: hidden;
}

.brand-img {
  width: 60% !important;
  margin: initial !important;
}

.quantity-discount-item {
  display: flex;
  align-items: end;
  gap: 5px;
  margin-bottom: 10px;
}
.quantity-discount-item .form-group {
  margin-bottom: 0;
}

#add_quantity {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
}

.badge.bg-primary {
  background-color: #e3f2fd !important;
  color: #0d47a1 !important;
  border: 1px solid #d5e0e9;
  margin: 0 2px;
}

.badge.bg-success {
  background-color: #e6f7f7 !important;
  color: #009494 !important;
  border: 1px solid #b2ebf2;
}

.badge.bg-danger {
  background-color: #ffeded !important;
  color: #c93434 !important;
  border: 1px solid #fae6e6;
}

.badge.bg-warning {
  background-color: #fff3dd !important;
  color: #b67842 !important;
  border: 1px solid #ffebce;
}

.badge.bg-info {
  background-color: #0dcaf0 !important;
  color: #212529 !important;
}

.badge.bg-secondary {
  background-color: #e4e7ea !important;
  color: #2d353c !important;
}

.badge.bg-default {
  background-color: #e4e7ea !important;
  color: #2d353c !important;
}

.badge.bg-inverse {
  background-color: #212529 !important;
  color: #fff !important;
}

.badge.bg-green {
  background-color: #e9ffe9 !important;
  color: #409b40 !important;
  border: 1px solid #d4e9d4;
}

.badge.bg-purple {
  background-color: #f0f1f8 !important;
  color: #616ba3 !important;
  border: 1px solid #d1c4e9;
}

.badge.bg-theme {
  background-color: #348fe2 !important;
  color: #fff !important;
}

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 16px 12px;
  background-position: left 0.75rem center;
  padding-inline-start: 2.25rem;
  padding-inline-end: 0.75rem;
}

[dir=ltr] select.form-control {
  background-position: right 0.75rem center;
  padding-inline-start: 0.75rem;
  padding-inline-end: 2.25rem;
}

select.form-control[multiple],
select.form-control[size] {
  background-image: none;
  padding-inline: 0.75rem;
}

.select2-container {
  width: 100% !important;
  min-height: 40px !important;
}
.select2-container .select2-search--inline .select2-search__field {
  margin-top: 0 !important;
}
.select2-container .select2-selection--multiple {
  height: initial !important;
  min-height: 42px;
  margin: 0;
  border-radius: 4px;
  padding: 0 15px;
}
.select2-container .select2-selection--single {
  height: 40px !important;
}

.categories-panel .select2-dropdown {
  min-height: 300px;
  max-height: 300px;
  overflow-y: auto;
}

.head-category-filter .select2-container {
  width: 40% !important;
}
.head-category-filter .select2-container .select2-selection--multiple .select2-selection__rendered {
  display: inline-block;
}
.head-category-filter .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: 0 !important;
}

@media (max-width: 567px) {
  .advanced-options .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: inline-block;
  }
  .advanced-options .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search__field {
    display: inline-block;
  }
}
.advanced-options .select2-container .select2-search {
  width: auto !important;
}
.advanced-options .select2-container .select2-search input {
  width: auto !important;
}
.advanced-options .select2-container .select2-search--inline .select2-search__field {
  margin-top: 0 !important;
}
.advanced-options .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: 6px;
  border: none;
}
.advanced-options .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #000 !important;
}
.advanced-options .multi-category .select2-selection__choice {
  background-color: #d9e0e7 !important;
  color: #676767;
  font-size: 11px;
  font-weight: bold;
}
.advanced-options .category-selection {
  margin-top: 25px;
}
.advanced-options .category-selection .panel-collapse .card-body .select2-container .select2-search--inline, .advanced-options .category-selection .card-collapse .card-body .select2-container .select2-search--inline {
  display: inline-block;
  width: auto !important;
  min-width: 50px;
}
.advanced-options .select2-results__option {
  font-size: 12px;
  padding: 8px;
}
.advanced-options .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 12px;
  line-height: 40px !important;
}
.advanced-options .geo-input .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 12px;
  line-height: 40px !important;
}
.advanced-options .select2-container .select2-selection--single,
.advanced-options .select2-container--default .select2-selection--multiple {
  min-height: 40px !important;
  border-color: #e2e7eb !important;
}
.advanced-options .geo-input .select2-container .select2-selection--single,
.advanced-options .select2-container--default .select2-selection--multiple {
  min-height: 40px !important;
}
.advanced-options #tags .select2-container .select2-selection--single,
.advanced-options .select2-container--default .select2-selection--multiple {
  min-height: 40px !important;
}
.advanced-options .select2-container--default .select2-selection--single .select2-selection__arrow {
  min-height: 40px !important;
}
.advanced-options .select2-results__option[aria-selected=true] {
  background-color: rgba(3, 169, 244, 0.17) !important;
  color: #2c2c35;
}
.advanced-options .relevant-object .select2-selection__rendered {
  display: inline-block !important;
}
.advanced-options .head-category-filter {
  margin: 0 0 0 0 !important;
  display: flex;
}
.advanced-options .head-category-filter .card-body {
  padding: 7px;
}
.advanced-options .head-category-filter .btn-info {
  height: 50px;
  padding: 0 20px;
}
.advanced-options .head-category-filter input {
  height: 50px;
  width: 53%;
}
.advanced-options .head-category-filter .select2-container {
  z-index: 10;
  width: 40% !important;
}
.advanced-options .head-category-filter .select2-container--default .select2-selection--multiple {
  height: 50px !important;
  overflow-y: auto;
  display: flex;
  align-items: center;
}
.advanced-options .head-category-filter .select2-container--default .select2-search--inline .select2-search__field {
  min-height: 30px;
}
@media (max-width: 567px) {
  .advanced-options .head-category-filter .head-category-filter input {
    height: 40px;
    width: 100%;
  }
  .advanced-options .head-category-filter .head-category-filter .btn-info {
    height: 40px;
  }
}
@media (max-width: 567px) {
  .advanced-options .head-category-filter .head-category-filter input {
    height: 40px;
    width: 100%;
  }
  .advanced-options .head-category-filter .head-category-filter .btn-info {
    height: 40px;
    padding: 0 10px;
  }
  .advanced-options .head-category-filter .head-category-filter .select2-container {
    display: none;
  }
}
.advanced-options .head-category-filter .select2-search .select2-search__field {
  display: contents;
}
.advanced-options .head-category-filter .select2-selection__choice {
  padding: 0 0 0 5px !important;
  margin: 2px !important;
  height: 22px !important;
  font-size: 10px;
}
.advanced-options .head-category-filter .select2-selection__choice span {
  padding: 3px 6px 3px 3px;
  font-size: 12px;
}

.select2-selection__rendered {
  display: inline-block;
  min-height: 40px !important;
}

.select2-search__field {
  min-height: 40px !important;
}

.select2-selection__arrow {
  min-height: 40px !important;
}

.select2-selection__choice {
  height: 38px;
  background-color: #e7eef6 !important;
  padding: 0 10px !important;
  color: #676767;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*font-weight: bold;*/
  font-size: 12px;
  border: 1px solid #d1dae5 !important;
}
.select2-selection__choice span {
  padding: 5px;
  font-size: 14px;
}

.yalla-product-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}
.yalla-product-option__thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e5e9f2;
  background-color: #f7f8fb;
}
.yalla-product-option__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
}
.yalla-product-option__thumb--empty i, .yalla-product-option__thumb--empty svg {
  font-size: 1.1em;
}
.yalla-product-option__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.yalla-product-option__title {
  font-weight: 600;
  line-height: 1.3;
  color: #2d353c;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yalla-product-option__price {
  font-size: 0.8rem;
  font-weight: 700;
  color: #348fe2;
}
.yalla-product-option--chip {
  gap: 0.2rem;
}
.yalla-product-option--chip .yalla-product-option__thumb {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.yalla-product-option--chip .yalla-product-option__title {
  -webkit-line-clamp: 1;
  font-weight: 700;
  font-size: 0.75rem;
  max-width: 144px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.select2-container.yalla-product-picker .select2-selection--multiple {
  padding: 3px 10px;
  border-color: #d5dbe4;
}
.select2-container.yalla-product-picker .select2-selection__rendered {
  min-height: 30px !important;
}
.select2-container.yalla-product-picker .select2-search__field {
  min-height: 26px !important;
}
.select2-container.yalla-product-picker .select2-selection__choice {
  height: 28px;
  max-width: 200px;
  margin: 3px 3px 3px 0;
  padding: 0 8px !important;
  gap: 10px;
  border-radius: 6px;
  background-color: #f2f6fb !important;
  border: 1px solid #dbe4ef !important;
}
.select2-container.yalla-product-picker .select2-selection__choice span {
  padding: 0;
}
.select2-container.yalla-product-picker.select2 .selection .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
  order: 2;
  top: 5px;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e2e9f3;
  color: #7b8798;
  font-size: 0;
  line-height: 1;
  margin: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.select2-container.yalla-product-picker.select2 .selection .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.5rem;
  line-height: 1;
}
.select2-container.yalla-product-picker.select2 .selection .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
  background-color: #f6d7d4;
  color: #b42318;
}

.select2-dropdown.yalla-product-picker-dropdown {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.select2-dropdown.yalla-product-picker-dropdown.is-closing {
  opacity: 0;
  transform: translateY(-4px);
}
.select2-dropdown.yalla-product-picker-dropdown .select2-results__option {
  color: #333;
  font-weight: 700;
}
.select2-dropdown.yalla-product-picker-dropdown .select2-results__option--highlighted[aria-selected],
.select2-dropdown.yalla-product-picker-dropdown .select2-results__option[aria-selected=true] {
  background-color: #e8f2fd !important;
  color: #333 !important;
}

.filtration-panel,
.edit-category-panel {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: -380px;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
  background: #fff;
  width: 320px;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 0 12px 12px 0;
  border-right: 3px solid #348fe2;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
}

.filtration-panel > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.filtration-panel.active,
.edit-category-panel.active {
  left: 0;
  visibility: visible;
  pointer-events: auto;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

.filtration-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 12px;
  border-bottom: 1px solid #e8e8e8;
  background: linear-gradient(135deg, #f8f9fa 0%, #eef3f8 100%);
  border-radius: 0 12px 0 0;
}

.filtration-panel-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #2d3436;
  letter-spacing: 0.01em;
}
.filtration-panel-title i {
  margin-left: 6px;
  font-size: 12px;
  color: #348fe2;
}

.filtration-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #888;
  background: rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.filtration-panel-close i {
  font-size: 11px;
}
.filtration-panel-close:hover, .filtration-panel-close:focus {
  background: #fce8e8;
  color: #e53935;
  text-decoration: none;
  transform: scale(1.1);
}

.filtration-panel-body,
.filtration-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  min-height: 0;
}
.filtration-panel-body .control-label,
.filtration-panel-content .control-label {
  line-height: 15px;
  font-weight: bold !important;
}
.filtration-panel-body .row,
.filtration-panel-content .row {
  margin: 0;
}

.filtration-panel .filtration-panel-body .form-control,
.filtration-panel .filtration-panel-content .form-control,
.edit-category-panel .filtration-panel-body .form-control,
.edit-category-panel .filtration-panel-content .form-control {
  height: 40px !important;
}
.filtration-panel .filtration-panel-body .checkbox,
.filtration-panel .filtration-panel-content .checkbox,
.edit-category-panel .filtration-panel-body .checkbox,
.edit-category-panel .filtration-panel-content .checkbox {
  margin-top: 5px;
  margin-bottom: 10px;
}
.filtration-panel .filtration-panel-body .checkbox label,
.filtration-panel .filtration-panel-content .checkbox label,
.edit-category-panel .filtration-panel-body .checkbox label,
.edit-category-panel .filtration-panel-content .checkbox label {
  padding-right: 25px;
  display: flex;
  align-items: center;
}
.filtration-panel .filtration-panel-body .checkbox label input,
.filtration-panel .filtration-panel-content .checkbox label input,
.edit-category-panel .filtration-panel-body .checkbox label input,
.edit-category-panel .filtration-panel-content .checkbox label input {
  width: 18px;
  height: 18px;
  margin: 0 -25px 0 0;
}

.filtration-panel-footer {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e8e8e8;
  background: linear-gradient(135deg, #f8f9fa 0%, #eef3f8 100%);
  border-radius: 0 0 12px 0;
}
.filtration-panel-footer .btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.filtration-collapse-btn,
.edit-category-collapse-btn {
  width: max-content;
  height: 40px;
  font-size: 12px;
  margin: 0 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: normal;
}
.filtration-collapse-btn svg, .filtration-collapse-btn i,
.edit-category-collapse-btn svg,
.edit-category-collapse-btn i {
  font-size: 10px;
  margin: 0 5px;
}
.filtration-collapse-btn:focus, .filtration-collapse-btn:hover,
.edit-category-collapse-btn:focus,
.edit-category-collapse-btn:hover {
  color: #fff;
  text-decoration: none;
}

.remove-out,
.remove-filtration {
  background-color: #ff4b45 !important;
  color: #fff !important;
  height: 22px !important;
  width: 22px !important;
  border-radius: 50% !important;
  font-size: 10px;
  margin: 0 2px;
  flex-shrink: 0;
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.remove-filtration:focus,
.remove-filtration:hover {
  color: #fff;
  text-decoration: none;
}

.filtration-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.filtration-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox] {
  margin-left: auto;
}

.category-filtration {
  margin: 0 !important;
  display: flex;
}
.category-filtration .card-body {
  padding: 7px;
}
.category-filtration input {
  height: 50px;
  width: 53%;
}
.category-filtration .btn-info {
  height: 50px;
  padding: 0 20px;
}
.category-filtration .select2-container {
  z-index: 10;
  width: 100% !important;
}
.category-filtration .select2-container--default .select2-selection--multiple {
  padding: 0;
  display: flex;
  align-items: center;
  max-height: 165px;
  overflow: hidden;
}
.category-filtration .select2-container--default .select2-search--inline .select2-search__field {
  min-height: 30px;
  display: inline-flex;
}
.category-filtration .select2-search .select2-search__field {
  display: contents;
}
.category-filtration .select2-selection__choice {
  padding: 0 2px 0 6px !important;
  margin: 0 3px !important;
  height: 30px !important;
  font-size: 10px;
}
.category-filtration .select2-selection__choice span {
  padding: 3px 6px 3px 3px;
  font-size: 12px;
}

.label-filter {
  font-weight: bold;
  margin-bottom: 0;
}

@media (max-width: 567px) {
  .filtration-collapse-btn,
  .edit-category-collapse-btn {
    font-size: 10px;
    margin: 0 4px;
  }
  .filtration-collapse-btn svg,
  .edit-category-collapse-btn svg,
  .filtration-collapse-btn i,
  .edit-category-collapse-btn i {
    font-size: 12px;
  }
  .category-filtration input {
    height: 40px;
    width: 100%;
  }
  .category-filtration .btn-info {
    height: 40px;
    padding: 0 10px;
  }
  .head-category-filter .d-flex {
    display: block;
  }
  .label-filter {
    margin-bottom: 5px;
  }
  .head-category-filter .btn-info {
    margin: 0 !important;
  }
}
.ltr .filtration-panel,
.ltr .edit-category-panel {
  left: initial;
  right: -380px;
  border-radius: 12px 0 0 12px;
  border-right: none;
  border-left: 3px solid #348fe2;
  transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.ltr .filtration-panel.active,
.ltr .edit-category-panel.active {
  right: 0;
  left: initial;
}
.ltr .filtration-panel-header {
  border-radius: 12px 0 0 0;
}
.ltr .filtration-panel-footer {
  border-radius: 0 0 0 12px;
}
.ltr .filtration-panel-title i {
  margin-left: initial;
  margin-right: 6px;
}
.ltr .filtration-panel .filtration-panel-body .checkbox label,
.ltr .filtration-panel .filtration-panel-content .checkbox label,
.ltr .edit-category-panel .filtration-panel-body .checkbox label,
.ltr .edit-category-panel .filtration-panel-content .checkbox label {
  padding-right: initial;
  padding-left: 25px;
}
.ltr .filtration-panel .filtration-panel-body .checkbox label input,
.ltr .filtration-panel .filtration-panel-content .checkbox label input,
.ltr .edit-category-panel .filtration-panel-body .checkbox label input,
.ltr .edit-category-panel .filtration-panel-content .checkbox label input {
  margin: 0 0 0 -25px;
}
.ltr .category-filtration .select2-selection__choice {
  padding: 0 6px 0 2px !important;
}

.sheet-handle {
  display: none;
}

@media (max-width: 575.98px) {
  .sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 3;
    height: 22px;
    background: #fff;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .sheet-handle::before {
    content: "";
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #d6dce4;
    transition: background 0.15s ease;
  }
  .sheet-handle:active {
    cursor: grabbing;
  }
  .sheet-handle:active::before {
    background: #b9c2cd;
  }
}
.sheet-scrim {
  display: none;
}

@media (max-width: 575.98px) {
  .sheet-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1018;
    background: rgba(15, 23, 32, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .sheet-scrim.is-on {
    opacity: 1;
    visibility: visible;
  }
}
body.sheet-lock .float-pill {
  display: none;
}

.notifications-widget {
  position: relative;
}
.notifications-widget .notif-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  color: var(--shell-txt-mid, rgba(255, 255, 255, 0.62));
  transition: background 0.16s ease, color 0.16s ease;
}
.notifications-widget .notif-bell i {
  font-size: 17px;
}
.notifications-widget .notif-bell:hover {
  background: var(--shell-hover, rgba(255, 255, 255, 0.06));
  color: var(--shell-txt, #fff);
}
.notifications-widget .notif-bell .label {
  position: absolute;
  top: 7px;
  inset-inline-end: 7px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--shell, #2d353c);
}
.notifications-widget .notif-panel {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  inset-inline-start: auto;
  top: calc(100% + 8px);
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: 100vh;
  max-height: calc(100dvh - 72px);
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--card-line, #e6eaf0);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(20, 30, 40, 0.18);
  overflow: hidden;
}
.notifications-widget .notif-panel.show {
  display: flex;
  flex-direction: column;
  animation: notifIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes notifIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.app-header .notifications-widget .notif-bell {
  display: flex;
}

.notif-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 18px 12px;
}
.notif-h .ht {
  display: flex;
  align-items: center;
  gap: 9px;
}
.notif-h b {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink, #2c3540);
}
.notif-h .cnt {
  background: #fde8e8;
  color: #ff5b57;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 9px;
}
.notif-h .mark {
  font-size: 12px;
  color: #348fe2;
  font-weight: 700;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.14s ease;
}
.notif-h .mark:hover {
  background: rgba(52, 143, 226, 0.12);
}

.notif-tabs {
  display: flex;
  gap: 6px;
  padding: 0 18px 12px;
}
.notif-tabs .ntab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-dim, #7a8896);
  background: #f1f4f8;
  border: 0;
  border-radius: 8px;
  padding: 6px 15px;
  cursor: pointer;
  transition: 0.16s ease;
}
.notif-tabs .ntab:hover {
  background: #e7ecf2;
}
.notif-tabs .ntab.active {
  background: #348fe2;
  color: #fff;
  box-shadow: 0 4px 12px rgba(52, 143, 226, 0.3);
}

.notif-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 440px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.n-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 18px;
  border-bottom: 1px solid #f2f4f6;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: background 0.16s ease, height 0.2s ease, opacity 0.2s ease;
  animation: nIn 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.n-item:last-child {
  border-bottom: none;
}
.n-item:hover {
  background: #f7f9fb;
}
.n-item.unread {
  background: #f0f7ff;
}
.n-item.unread:hover {
  background: #e6f1fd;
}
.n-item.n-removing {
  opacity: 0;
  height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

@keyframes nIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.notifications-widget .notif-panel .n-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
}

.n-ic {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
}

.n-type-order {
  background: #00a884;
}

.n-type-product {
  background: #f59c1a;
}

.n-type-customer {
  background: #49b6d6;
}

.n-type-payment {
  background: #2f80ed;
}

.n-type-system {
  background: #727cb6;
}

.n-type-alert {
  background: #ff5b57;
}

.n-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.n-msg {
  font-size: 13.5px;
  color: var(--ink, #2c3540);
  line-height: 1.5;
}

.n-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-dim, #7a8896);
}

.n-dot {
  flex-shrink: 0;
  align-self: center;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #348fe2;
  cursor: pointer;
  position: relative;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.n-dot::after {
  content: "";
  position: absolute;
  inset: -9px;
}
.n-dot:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(52, 143, 226, 0.15);
}

.notif-foot {
  padding: 8px;
  border-top: 1px solid var(--card-line, #e6eaf0);
  background: #fafbfc;
}
.notif-foot a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #348fe2;
  text-decoration: none;
  transition: background 0.15s ease;
}
.notif-foot a:hover {
  background: rgba(52, 143, 226, 0.1);
  text-decoration: none;
}

.n-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-dim, #8a9199);
}
.n-empty i {
  display: block;
  font-size: 34px;
  opacity: 0.4;
  margin-bottom: 12px;
}
.n-empty b {
  display: block;
  font-size: 14px;
  color: #6b7178;
  font-weight: 700;
  margin-bottom: 3px;
}
.n-empty span {
  font-size: 13px;
  color: var(--ink-dim, #8a9199);
}

.n-skel {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f4f8;
}
.n-skel .n-skel-ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.n-skel .n-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.n-skel .n-skel-lines span {
  height: 10px;
  border-radius: 6px;
}
.n-skel .n-skel-lines span:first-child {
  width: 80%;
}
.n-skel .n-skel-lines span:last-child {
  width: 45%;
}
.n-skel .n-skel-ic, .n-skel .n-skel-lines span {
  background: linear-gradient(90deg, #eef1f5 25%, #e4e9ef 37%, #eef1f5 63%);
  background-size: 400% 100%;
  animation: nSkel 1.3s ease infinite;
}

@keyframes nSkel {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@media (max-width: 575.98px) {
  .notifications-widget .notif-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 100vh;
    top: 100dvh;
    bottom: auto !important;
    transform: translateY(-100%) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 60dvh;
    margin: 0 !important;
    z-index: 1075;
    border: 0;
    border-top: 1px solid var(--card-line, #e6eaf0);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px -6px rgba(15, 23, 32, 0.28);
    padding-bottom: env(safe-area-inset-bottom, 0);
    flex-direction: column;
    transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .notifications-widget .notif-panel.show {
    display: flex !important;
    animation: none !important;
  }
  .notifications-widget .notif-panel.is-dragging {
    transition: none;
  }
  .notif-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  .n-item {
    padding: 15px 18px;
  }
  .n-dot::after {
    inset: -14px;
  }
}
@media (max-width: 767.98px) {
  .notif-tabs .ntab {
    height: 44px;
  }
}
.search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  min-width: 400px;
  max-width: 420px;
  padding: 0 14px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--shell-line-strong, rgba(255, 255, 255, 0.12));
  color: var(--shell-txt-mid, rgba(255, 255, 255, 0.62));
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.search-trigger i {
  font-size: 14px;
}
.search-trigger .st-label {
  white-space: nowrap;
}
.search-trigger .st-kbd {
  margin-inline-start: auto;
  display: flex;
  gap: 3px;
  align-items: center;
}
.search-trigger .st-kbd kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--shell-line-strong, rgba(255, 255, 255, 0.12));
  border-radius: 5px;
  padding: 1px 6px;
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  color: var(--shell-txt-dim, rgba(255, 255, 255, 0.42));
  line-height: 1.4;
}
.search-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--shell-txt, rgba(255, 255, 255, 0.92));
}
@media (max-width: 1199.98px) {
  .search-trigger {
    min-width: 0;
  }
  .search-trigger .st-kbd {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .search-trigger {
    width: 42px;
    min-width: 42px;
    padding: 0;
    justify-content: center;
  }
  .search-trigger .st-label {
    display: none;
  }
}

.search-palette {
  position: fixed;
  inset: 0;
  z-index: 1080;
}
.search-palette[hidden] {
  display: none;
}
.search-palette .sp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 32, 0.55);
  opacity: 0;
  transition: opacity 0.18s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.search-palette .sp-dialog {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: min(640px, 100vw - 32px);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-line, #e6eaf0);
  border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(15, 23, 32, 0.55), 0 4px 14px rgba(0, 0, 0, 0.2);
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.search-palette.is-open .sp-backdrop {
  opacity: 1;
}
.search-palette.is-open .sp-dialog {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--card-line, #e6eaf0);
}
.sp-head .sp-head-icon {
  font-size: 16px;
  color: var(--ink-dim, #7a8896);
  flex-shrink: 0;
}
.sp-head .sp-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink, #2c3540);
}
.sp-head .sp-input::placeholder {
  color: var(--ink-dim, #7a8896);
  font-size: 14px;
}
.sp-head .sp-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: #f1f4f8;
  color: #7a8896;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sp-head .sp-close i {
  line-height: 1;
}
.sp-head .sp-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.sp-scopes {
  display: flex;
  gap: 7px;
  padding: 12px 18px;
  overflow-x: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--card-line, #e6eaf0);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sp-scopes::-webkit-scrollbar {
  display: none;
}
.sp-scopes .sp-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid var(--card-line, #e6eaf0);
  background: #fff;
  color: var(--ink, #2c3540);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: 0.15s ease;
}
.sp-scopes .sp-scope i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  background: #eef1f5;
  color: var(--ink-dim, #7a8896);
  transition: 0.15s ease;
}
.sp-scopes .sp-scope span {
  height: initial;
  padding: 0;
}
.sp-scopes .sp-scope:hover {
  background: #f5f8fc;
  border-color: #d8e0ea;
}
.sp-scopes .sp-scope[data-type=product] i {
  background: rgba(52, 143, 226, 0.14);
  color: #348fe2;
}
.sp-scopes .sp-scope[data-type=product]:hover {
  border-color: rgba(52, 143, 226, 0.4);
}
.sp-scopes .sp-scope[data-type=product].is-active {
  background: rgba(52, 143, 226, 0.12);
  border-color: rgba(52, 143, 226, 0.5);
  font-weight: 700;
}
.sp-scopes .sp-scope[data-type=product].is-active i {
  background: #348fe2;
  color: #fff;
}
.sp-scopes .sp-scope[data-type=order] i {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
}
.sp-scopes .sp-scope[data-type=order]:hover {
  border-color: rgba(245, 158, 11, 0.4);
}
.sp-scopes .sp-scope[data-type=order].is-active {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.5);
  font-weight: 700;
}
.sp-scopes .sp-scope[data-type=order].is-active i {
  background: #f59e0b;
  color: #fff;
}
.sp-scopes .sp-scope[data-type=customer] i {
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
}
.sp-scopes .sp-scope[data-type=customer]:hover {
  border-color: rgba(34, 197, 94, 0.4);
}
.sp-scopes .sp-scope[data-type=customer].is-active {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.5);
  font-weight: 700;
}
.sp-scopes .sp-scope[data-type=customer].is-active i {
  background: #22c55e;
  color: #fff;
}
.sp-scopes .sp-scope[data-type=taxonomy] i {
  background: rgba(139, 92, 246, 0.14);
  color: #8b5cf6;
}
.sp-scopes .sp-scope[data-type=taxonomy]:hover {
  border-color: rgba(139, 92, 246, 0.4);
}
.sp-scopes .sp-scope[data-type=taxonomy].is-active {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.5);
  font-weight: 700;
}
.sp-scopes .sp-scope[data-type=taxonomy].is-active i {
  background: #8b5cf6;
  color: #fff;
}
.sp-scopes .sp-scope[data-type=user] i {
  background: rgba(14, 165, 233, 0.14);
  color: #0ea5e9;
}
.sp-scopes .sp-scope[data-type=user]:hover {
  border-color: rgba(14, 165, 233, 0.4);
}
.sp-scopes .sp-scope[data-type=user].is-active {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.5);
  font-weight: 700;
}
.sp-scopes .sp-scope[data-type=user].is-active i {
  background: #0ea5e9;
  color: #fff;
}

.sp-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 143, 226, 0.35) transparent;
}
.sp-body::-webkit-scrollbar {
  width: 8px;
}
.sp-body::-webkit-scrollbar-track {
  background: transparent;
}
.sp-body::-webkit-scrollbar-thumb {
  background: rgba(52, 143, 226, 0.3);
  border-radius: 8px;
  border: 2px solid #fff;
  background-clip: padding-box;
}
.sp-body::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 143, 226, 0.5);
  background-clip: padding-box;
}

.sp-section-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim, #7a8896);
  padding: 8px 12px 4px;
}

.sp-result,
.sp-recent {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 5px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--card-line, #e6eaf0);
  background: transparent;
  color: var(--ink, #2c3540);
  text-align: start;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.sp-result:last-child,
.sp-recent:last-child {
  border-bottom: 0;
}
.sp-result:hover, .sp-result.is-cursor,
.sp-recent:hover,
.sp-recent.is-cursor {
  background: #f1f6fc;
}
.sp-result.is-cursor,
.sp-recent.is-cursor {
  box-shadow: inset 0 0 0 1px rgba(52, 143, 226, 0.3);
}

.sp-recent i {
  color: var(--ink-dim, #7a8896);
  font-size: 13px;
}

.sp-result-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #eef3f9;
  color: #348fe2;
}
.sp-result-ico.sp-result-ico--img {
  width: 46px;
  height: 46px;
  background: #f1f4f8;
  border: 1px solid var(--card-line, #e6eaf0);
  overflow: hidden;
  padding: 0;
}
.sp-result-ico .sp-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-type-order .sp-result-ico {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
}

.sp-type-product .sp-result-ico {
  background: rgba(52, 143, 226, 0.14);
  color: #348fe2;
}

.sp-type-customer .sp-result-ico {
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
}

.sp-type-taxonomy .sp-result-ico {
  background: rgba(139, 92, 246, 0.14);
  color: #8b5cf6;
}

.sp-type-user .sp-result-ico {
  background: rgba(14, 165, 233, 0.14);
  color: #0ea5e9;
}

.sp-result-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sp-result-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-type-product .sp-result-title {
  font-size: 14px;
  font-weight: 700;
}

.sp-result-sub {
  font-size: 12px;
  color: var(--ink-dim, #7a8896);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-result-go {
  font-size: 12px;
  color: var(--ink-dim, #7a8896);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.sp-result:hover .sp-result-go,
.sp-result.is-cursor .sp-result-go {
  opacity: 0.7;
}

.sp-result-aside {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sp-result-meta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #2c3540);
  white-space: nowrap;
}

.sp-badge {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.sp-badge--success {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}
.sp-badge--info {
  background: rgba(52, 143, 226, 0.14);
  color: #2f7fce;
}
.sp-badge--warn {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}
.sp-badge--danger {
  background: rgba(239, 68, 68, 0.13);
  color: #dc2626;
}
.sp-badge--neutral {
  background: #eef1f5;
  color: #6b7785;
}

.sp-actions {
  flex-shrink: 0;
  padding: 8px;
  border-top: 1px solid var(--card-line, #e6eaf0);
}
.sp-actions[hidden] {
  display: none;
}

.sp-viewall {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 11px;
  border: 0;
  background: rgba(52, 143, 226, 0.07);
  color: #337ab7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease;
}
.sp-viewall i {
  font-size: 13px;
}
.sp-viewall .sp-viewall-go {
  margin-inline-start: auto;
  font-size: 12px;
  opacity: 0.7;
}
.sp-viewall:hover, .sp-viewall.is-cursor {
  background: rgba(52, 143, 226, 0.13);
}
.sp-viewall.is-cursor {
  box-shadow: inset 0 0 0 1px rgba(52, 143, 226, 0.3);
}

.sp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 0;
  color: var(--ink-dim, #7a8896);
  font-size: 14px;
}

.sp-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(52, 143, 226, 0.25);
  border-top-color: #348fe2;
  border-radius: 50%;
  animation: spSpin 0.7s linear infinite;
}

@keyframes spSpin {
  to {
    transform: rotate(360deg);
  }
}
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-dim, #7a8896);
}
.sp-empty i {
  font-size: 30px;
  opacity: 0.55;
}
.sp-empty p {
  font-size: 14px;
}

.sp-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 18px;
  flex-shrink: 0;
  border-top: 1px solid var(--card-line, #e6eaf0);
  font-size: 11.5px;
  color: #6b7785;
}
.sp-foot .sp-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6b7785;
}
.sp-foot kbd {
  background: #f1f4f8;
  border: 1px solid var(--card-line, #e6eaf0);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: inherit;
  font-weight: 700;
  color: #5b6b7a;
}
.sp-foot .sp-foot-close {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: initial;
  padding: 7px 13px;
  border: 0;
  border-radius: 8px;
  background: #f1f4f8;
  color: #6b7785;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s ease;
}
.sp-foot .sp-foot-close i {
  font-size: 12px;
}
.sp-foot .sp-foot-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
@media (max-width: 767.98px) {
  .sp-foot .sp-hint {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .search-palette .sp-dialog {
    top: 0;
    left: 0;
    width: 100%;
    max-height: none;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    padding-top: env(safe-area-inset-top, 0);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
  }
  .search-palette.is-open .sp-dialog {
    transform: translateY(0);
  }
  .search-palette .sp-head {
    padding: 14px 16px;
  }
  .sp-result, .sp-recent {
    padding: 13px 12px;
  }
  .sp-scopes .sp-scope {
    height: 40px;
  }
  .sp-body {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  }
  .sp-foot {
    display: none;
  }
}
.account-menu {
  position: relative;
}
.account-menu .account-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px;
  border-radius: 12px;
  color: var(--shell-txt, rgba(255, 255, 255, 0.92));
  transition: background 0.16s ease;
  cursor: pointer;
}
.account-menu .account-trigger:hover {
  background: var(--shell-hover, rgba(255, 255, 255, 0.06));
}
.account-menu .account-trigger[aria-expanded=true] {
  background: var(--shell-active, rgba(52, 143, 226, 0.16));
}
.account-menu .account-trigger .avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  position: relative;
  overflow: visible;
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
.account-menu .account-trigger .avatar .dot {
  position: absolute;
  bottom: -1px;
  inset-inline-start: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--shell, #2d353c);
}
.account-menu .account-trigger .who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: start;
  max-width: 75px;
  height: initial;
  align-items: flex-start;
}
.account-menu .account-trigger .who b {
  font-size: 13px;
  font-weight: 700;
}
.account-menu .account-trigger .who span {
  font-size: 11px;
  color: var(--shell-txt-dim, rgba(255, 255, 255, 0.42));
}
.account-menu .account-trigger .caret {
  color: var(--shell-txt-dim, rgba(255, 255, 255, 0.42));
  margin-inline-start: 2px;
}
@media (max-width: 991.98px) {
  .account-menu .account-trigger .who, .account-menu .account-trigger .caret {
    display: none;
  }
  .account-menu .account-trigger {
    padding: 0 4px;
  }
}
.account-menu .acc {
  width: 300px;
  max-width: calc(100vw - 24px);
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  max-height: 100vh;
  max-height: calc(100dvh - 72px);
  padding: 0;
  margin-top: 8px;
  background: #fff;
  color: var(--ink, #2c3540);
  border: 1px solid var(--card-line, #e6eaf0);
  border-radius: 16px;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.account-menu .acc.show {
  animation: accIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes accIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.acc-head {
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #eef4fc, #f7f9fc);
  border-bottom: 1px solid var(--card-line, #e6eaf0);
}
.acc-head::before {
  content: "";
  position: absolute;
  top: -40px;
  inset-inline-start: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 143, 226, 0.14), transparent 70%);
  pointer-events: none;
}
.acc-head .avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  position: relative;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.28);
}
.acc-head .avatar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  inset-inline-start: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid #fff;
}
.acc-head .ai {
  position: relative;
  min-width: 0;
}
.acc-head .ai b {
  font-size: 15.5px;
  font-weight: 800;
  display: block;
  color: var(--ink, #2c3540);
}
.acc-head .ai span {
  font-size: 12px;
  color: var(--ink-dim, #7a8896);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-head .ai .role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: #348fe2;
  background: #fff;
  padding: 3px 9px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(52, 143, 226, 0.15);
}

.acc-sec {
  padding: 8px;
}
.acc-sec + .acc-sec {
  border-top: 1px solid var(--card-line, #e6eaf0);
}
.acc-sec .sec-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #aab4c0;
  text-transform: uppercase;
  padding: 6px 10px 4px;
}

.acc-i {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #2c3540);
  text-decoration: none;
  transition: 0.16s ease;
  position: relative;
}
.acc-i .ti {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: #eef3f9;
  color: var(--ink-dim, #7a8896);
  transition: 0.16s ease;
}
.acc-i:hover {
  background: #f4f8fc;
}
.acc-i:hover .ti {
  transform: scale(1.06);
}
.acc-i.c-blue .ti {
  background: #e7f0fd;
  color: #2f80ed;
}
.acc-i.c-green .ti {
  background: #e3f7f1;
  color: #0c9b73;
}
.acc-i.c-amber .ti {
  background: #fdf0db;
  color: #d98307;
}
.acc-i.c-purple .ti {
  background: #efe9fb;
  color: #7c5cd6;
}
.acc-i .arr {
  margin-inline-start: auto;
  font-size: 11px;
  color: #c2ccd6;
  transition: 0.16s ease;
}
.acc-i:hover .arr {
  color: #348fe2;
  transform: translateX(-3px);
}
.acc-i .pill {
  margin-inline-start: auto;
  font-size: 10px;
  font-weight: 700;
  background: #eef3f9;
  color: var(--ink-dim, #7a8896);
  padding: 3px 9px;
  border-radius: 20px;
}
.acc-i.danger {
  color: #ef4444;
}
.acc-i.danger .ti {
  background: #fde7e7;
  color: #ef4444;
}
.acc-i.danger:hover {
  background: rgba(239, 68, 68, 0.06);
}

.account-menu .acc .acc-i {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  text-align: start;
}

.lang-row {
  cursor: default;
}
.lang-row:hover {
  background: transparent;
}
.lang-row .lang-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.lang-row .lang-text small {
  font-size: 10.5px;
  color: var(--ink-dim, #7a8896);
  font-weight: 600;
  margin-top: 1px;
}
.lang-row .plan-tag {
  margin-inline-start: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  color: #d98307;
  background: #fdf0db;
  padding: 4px 11px;
  border-radius: 20px;
  white-space: nowrap;
}
.lang-row .plan-tag i {
  font-size: 10px;
}
.lang-row.locked .ti {
  background: #fdf0db;
  color: #d98307;
}
.lang-row .lang-switch {
  margin-inline-start: auto;
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}
.lang-row .lang-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lang-row .lang-switch .lang-track {
  width: 44px;
  height: 25px;
  border-radius: 20px;
  background: #cdd6e0;
  transition: 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
.lang-row .lang-switch .lang-track::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
  transition: 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.lang-row .lang-switch input:checked + .lang-track {
  background: linear-gradient(135deg, #348fe2, #3D43C8);
}
.lang-row .lang-switch input:checked + .lang-track::after {
  inset-inline-start: 22px;
}
.lang-row .lang-switch input:focus-visible + .lang-track {
  outline: 2px solid #5aa6e8;
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .account-menu .acc {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 100vh;
    top: 100dvh;
    bottom: auto !important;
    transform: translateY(-100%) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85dvh;
    margin: 0 !important;
    z-index: 1075;
    border: 0;
    border-top: 1px solid var(--card-line, #e6eaf0);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px -6px rgba(15, 23, 32, 0.28);
    padding-bottom: env(safe-area-inset-bottom, 0);
    flex-direction: column;
    transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .account-menu .acc.show {
    display: flex !important;
    animation: none !important;
  }
  .account-menu .acc.is-dragging {
    transition: none;
  }
  .acc-i {
    padding: 12px 10px;
  }
}
.deploy-widget {
  position: relative;
}

.deploy {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  inset-inline-start: auto;
  top: calc(100% + 8px);
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: 100vh;
  max-height: calc(100dvh - 72px);
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--card-line, #e6eaf0);
  border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(15, 23, 32, 0.55), 0 4px 14px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.deploy.show {
  display: flex;
  flex-direction: column;
  animation: depIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes depIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dep-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
}
.dep-h .ht {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.dep-h b {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #2c3540);
}
.dep-h small {
  font-size: 11.5px;
  color: var(--ink-dim, #7a8896);
  margin-top: 2px;
}
.dep-h .dep-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, #348fe2, #3D43C8);
  box-shadow: 0 4px 12px rgba(52, 143, 226, 0.3);
}

.dep-empty {
  padding: 30px 18px;
  text-align: center;
  color: var(--ink-dim, #7a8896);
  font-size: 13px;
}
.dep-empty .sp-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(52, 143, 226, 0.25);
  border-top-color: #348fe2;
  border-radius: 50%;
  display: inline-block;
  animation: spSpin 0.7s linear infinite;
}

.dep-last {
  margin: 4px 14px 10px;
  padding: 14px;
  border-radius: 13px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #eef4fc, #f6f9fc);
  border: 1px solid var(--card-line, #e6eaf0);
}
.dep-last::before {
  content: "";
  position: absolute;
  top: -30px;
  inset-inline-start: -20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 143, 226, 0.12), transparent 70%);
}
.dep-last .lbl {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-dim, #7a8896);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dep-last .big {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #2c3540);
  margin: 5px 0 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dep-last .big .ok, .dep-last .big .fail {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.dep-last .big .ok {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.dep-last .big .fail {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.dep-last .meta {
  font-size: 12px;
  color: var(--ink-dim, #7a8896);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dep-last .ver {
  font-weight: 800;
  color: #348fe2;
  background: #fff;
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(52, 143, 226, 0.14);
}
.dep-last .tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-dim, #7a8896);
  background: #fff;
  padding: 1px 8px;
  border-radius: 20px;
}

.dep-hist-h {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-dim, #7a8896);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 18px;
}

.dep-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 200px;
  overflow-y: auto;
  padding: 0 8px 10px;
  -webkit-overflow-scrolling: touch;
}

.dep-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  transition: background 0.12s ease;
}
.dep-row:hover {
  background: #f7f9fb;
}
.dep-row .st {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.dep-row .st.ok {
  background: #e3f7f1;
  color: #0c9b73;
}
.dep-row .st.fail {
  background: #fde7e7;
  color: #e0544f;
}
.dep-row .di {
  flex: 1;
  min-width: 0;
}
.dep-row .di b {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--ink, #2c3540);
}
.dep-row .di b .tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-dim, #7a8896);
  background: #eef3f9;
  padding: 1px 7px;
  border-radius: 20px;
}
.dep-row .di span {
  font-size: 11px;
  color: var(--ink-dim, #7a8896);
}
.dep-row .when {
  font-size: 11px;
  color: var(--ink-dim, #7a8896);
  flex-shrink: 0;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .deploy {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 100vh;
    top: 100dvh;
    bottom: auto !important;
    transform: translateY(-100%) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85dvh;
    margin: 0 !important;
    z-index: 1075;
    border: 0;
    border-top: 1px solid var(--card-line, #e6eaf0);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px -6px rgba(15, 23, 32, 0.28);
    padding-bottom: env(safe-area-inset-bottom, 0);
    flex-direction: column;
    transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .deploy.show {
    display: flex !important;
    animation: none !important;
  }
  .deploy.is-dragging {
    transition: none;
  }
}
[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  border-radius: 7px;
  background: #1f2730;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1090;
}

[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (hover: none), (pointer: coarse) {
  [data-tip]::after {
    display: none;
  }
}
.h-icon-btn:focus-visible,
.search-trigger:focus-visible,
.account-trigger:focus-visible,
.notif-bell:focus-visible,
.sp-scope:focus-visible,
.ntab:focus-visible {
  outline: 2px solid var(--accent-2, #5aa6e8);
  outline-offset: 2px;
}

.notif-bell i {
  transform-origin: top center;
}
.notif-bell:hover i {
  animation: bellShake 0.6s ease;
}

@keyframes bellShake {
  0%, 100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-12deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-6deg);
  }
  80% {
    transform: rotate(4deg);
  }
}
.navbar-language > .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  border-radius: 11px;
  color: var(--shell-txt-mid, rgba(255, 255, 255, 0.62));
  transition: background 0.16s ease, color 0.16s ease;
}
.navbar-language > .dropdown-toggle .name {
  font-size: 13px;
  font-weight: 600;
}
.navbar-language > .dropdown-toggle .caret {
  opacity: 0.6;
}
.navbar-language > .dropdown-toggle:hover {
  background: var(--shell-hover, rgba(255, 255, 255, 0.06));
  color: var(--shell-txt, #fff);
}
.navbar-language > .dropdown-toggle[aria-expanded=true] {
  background: var(--shell-active, rgba(52, 143, 226, 0.16));
  color: #fff;
}

.show-my-store a {
  border-color: var(--shell-line-strong, rgba(255, 255, 255, 0.12)) !important;
  color: var(--shell-txt-mid, rgba(255, 255, 255, 0.62)) !important;
  border-radius: 11px !important;
}
.show-my-store a:hover {
  background-color: var(--shell-hover, rgba(255, 255, 255, 0.06)) !important;
  color: var(--shell-txt, #fff) !important;
  border-color: var(--shell-line-strong, rgba(255, 255, 255, 0.2)) !important;
}

.navbar-language .dropdown-menu {
  border: 1px solid var(--card-line, #e6eaf0);
  border-radius: 13px;
  box-shadow: 0 18px 50px -12px rgba(15, 23, 32, 0.35), 0 4px 14px rgba(0, 0, 0, 0.12);
  padding: 6px;
  margin-top: 8px;
}
.navbar-language .dropdown-menu > li > a {
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 13px;
}
.navbar-language .dropdown-menu > li > a:hover {
  background: #f4f8fc;
}
.navbar-language .dropdown-menu .arrow {
  display: none;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

.text-start {
  text-align: start !important;
}

.text-end {
  text-align: end !important;
}

.text-physical-right {
  text-align: right !important;
}

.text-physical-left {
  text-align: left !important;
}

.features-panel .features-box {
  background-color: #f5f7ff;
  padding: 20px 15px 15px;
  display: inline-block;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.features-panel .features-box a {
  text-decoration: none;
}
.features-panel .features-box a h3 {
  font-size: 16px;
  font-weight: bold;
  color: #348fe2;
  margin: 0 0 10px 0;
}
.features-panel .features-box a p {
  font-size: 12px;
  color: #5e5e5e;
  min-height: 60px;
  max-height: 60px;
  margin-bottom: 10px;
  overflow: hidden;
  line-height: 1.6;
}
.features-panel .features-box a .content-box {
  display: flex;
}
.features-panel .features-box a .content-box svg,
.features-panel .features-box a .content-box i {
  font-size: 22px;
  position: absolute;
  left: 10px;
  top: 10px;
}
.features-panel .features-box a .img-box {
  height: 75px;
  width: 75px;
  background-color: #fff;
  flex-shrink: 0;
  margin-left: 10px;
  margin-bottom: 10px;
}
.features-panel .features-box a .img-box img {
  height: 100%;
  width: 100%;
}
.features-panel .features-box .btn-features {
  background-color: #348fe2;
  font-size: 12px;
  font-weight: bold;
  height: 30px;
  padding: 0 10px;
  float: left;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.features-panel .features-box .comments-label {
  height: 18px;
  color: #fff;
  font-weight: bold;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 4px;
  margin: 0;
  font-size: 10px;
}
.features-panel .features-box:hover {
  box-shadow: 0 0 4px rgba(223, 219, 242, 0.85);
}

.comments-input {
  display: block;
  text-align: center;
  position: relative;
}
.comments-input button {
  height: 40px;
  padding: 0 20px;
  margin: 15px 0;
}
.comments-input .facebookFeedBtn {
  position: absolute;
  left: 0;
  top: 6px;
}

.comments-disc {
  width: 100%;
}
.comments-disc h3 {
  font-size: 18px;
  font-weight: bold;
}
.comments-disc p {
  font-size: 14px;
  line-height: 1.8;
}
.comments-disc a {
  font-size: 12px;
  height: 34px;
  color: #348fe2;
  border: 1px solid #348fe2;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  border-radius: 4px;
}
.comments-disc a:hover {
  color: #fff;
  background-color: #348fe2;
}
.comments-disc .img-box {
  width: 100%;
  min-height: 100px;
}
.comments-disc .img-box img {
  width: 100%;
  height: 100%;
}

.comments-checkbox {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.comments-checkbox .checkbox {
  margin: 0 10px;
}

.feature-on {
  color: #0ea432;
}

.feature-off {
  color: #bebebe;
}

.c-watermark .upload-area {
  display: block;
  text-align: center;
  width: 120px;
  border: 1px solid rgb(218, 218, 218);
}
.c-watermark .watermark-pic {
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  display: block;
}
.c-watermark .file-upload {
  display: none;
}
.c-watermark .img-box {
  overflow: hidden;
  width: 120px;
  height: 120px;
  border: 2px solid #eee;
  cursor: pointer;
  position: relative;
  margin: auto;
}

.collapse-checkbox {
  border-bottom: 1px solid #eee;
}

.note-editor.note-frame {
  border: 1px solid rgba(0, 0, 0, 0.196) !important;
}

.ltr .features-panel .features-box a .content-box svg, .ltr .features-panel .features-box a .content-box i,
.ltr .features-panel .features-box a .content-box i {
  left: initial;
  right: 10px;
}
.ltr .features-panel .features-box a .img-box {
  margin-left: initial;
  margin-right: 10px;
}
.ltr .features-panel .features-box .btn-features {
  float: right;
}
.ltr .features-panel .features-box .comments-label {
  left: initial;
  right: 0;
}

.themesFilters .layouts .item, .packages .layouts .item {
  transition: ease-in-out 1.35s;
  cursor: pointer;
}
.themesFilters .layouts .item .img-box, .packages .layouts .item .img-box {
  position: relative;
  height: 300px;
  transition: ease-in-out 1.35s;
}
.themesFilters .layouts .item .img-box img, .packages .layouts .item .img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: top center;
  transition: ease-in-out 1.35s;
}
.themesFilters .layouts .item:hover, .packages .layouts .item:hover {
  transition: ease-in-out 1.35s;
}
.themesFilters .layouts .item:hover .img-box, .packages .layouts .item:hover .img-box {
  transition: ease-in-out 1.35s;
}
.themesFilters .layouts .item:hover .img-box img, .packages .layouts .item:hover .img-box img {
  transition: ease-in-out 1.35s;
  object-position: bottom center;
}

.packages .themes-store-banner .img-box {
  width: 350px;
}
.packages .themes-store-banner .plan-name {
  color: #ffcf5c;
  font-weight: 800;
}
.packages .item {
  padding: 25px !important;
  background-color: #2d353c;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.packages .item form {
  margin-top: auto;
}
.packages .item .title-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.packages .item .title-box .img-box {
  width: 70px;
  height: 70px;
}
.packages .item .title-box .img-box img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  border: none;
  position: initial;
}
.packages .item .title-box h3 {
  margin: 0 10px;
  color: #dee2e6;
  font-size: 26px;
  font-weight: bold;
}
.packages .item .details {
  border: none !important;
}
.packages .item .details .fet-line {
  font-size: 16px;
  margin: 10px 0;
  color: #b1b6bb;
}
.packages .item .details .fet-line span {
  margin: 0 5px;
}
.packages .item .details .fet-line.on {
  font-weight: 600;
  color: #dee2e6;
}
.packages .item .details .fet-line.on i, .packages .item .details .fet-line.on svg {
  color: #00acac;
}
.packages .item .prices {
  font-size: 16px;
}
.packages .item .prices .free-plan {
  font-size: 40px;
  width: 100%;
  display: block;
  color: #fff;
  font-weight: bold;
}
.packages .item .prices .price {
  margin-bottom: 10px;
}
.packages .item .prices .price label {
  color: #bfbfbf;
}
.packages .item .prices .price label input {
  width: 18px;
  height: 18px;
  margin: 0 5px;
}
.packages .item .prices .price label span.main-price {
  font-weight: bold;
  color: #00acac;
  font-size: 17px;
}
.packages .item .prices .price small {
  margin: 0 7px;
}
.packages .item .action-btn button {
  min-height: 50px;
  width: 100%;
  padding: 8px 12px;
  line-height: 1.4;
  background-color: #1374c8;
  color: #fff;
  float: none;
  margin-top: 30px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: none;
}
.packages .item .action-btn button span {
  padding: 0 5px;
  text-align: center;
  font-size: 18px;
}
.packages .item .action-btn button {
  /* &:hover {
     background: #1374c8;
   }*/
}
.packages .item .trial-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto 15px;
  padding: 9px 20px;
  border-radius: 999px;
  background-color: rgba(19, 116, 200, 0.12);
  border: 1px solid rgba(19, 116, 200, 0.45);
  color: #1374c8;
  font-size: 16px;
  font-weight: 700;
  animation: trial-glow 1.6s ease-in-out infinite;
}
.packages .bg-gradient-blue-indigo .trial-badge {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  animation: trial-glow-white 1.6s ease-in-out infinite;
}
.packages .bg-gradient-blue-indigo {
  background-image: linear-gradient(to bottom, #348fe2 0, #8753de 100%) !important;
}
.packages .bg-gradient-blue-indigo .details .fet-line svg, .packages .bg-gradient-blue-indigo .details .fet-line i {
  color: #1b3d33 !important;
}
.packages .bg-gradient-blue-indigo .prices .price label, .packages .bg-gradient-blue-indigo .prices .price span.main-price {
  color: #fff !important;
}
.packages .bg-gradient-blue-indigo .action-btn button {
  background-color: #fff;
  color: #1b3d33;
}

.offer-list {
  background-color: #e7fff8;
  margin: 14px 10px;
  border-radius: 8px;
}
.offer-list .white-friday {
  margin: 0 0 10px;
  padding: 10px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offer-list .white-friday i, .offer-list .white-friday svg {
  color: #01966b;
  font-size: 16px;
}
.offer-list .white-friday span {
  color: #01966b;
  font-size: 16px;
  margin: 0 5px;
}

#androidApp {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 25px;
  border-radius: 10px;
  gap: 10px;
}
#androidApp .img-box {
  width: 25%;
  flex-shrink: 0;
}
#androidApp .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#androidApp h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}
#androidApp p {
  font-size: 14px;
  margin-bottom: 15px;
}
#androidApp .action-btn {
  display: flex;
  align-content: center;
}
#androidApp .action-btn button {
  background: #348fe2;
  height: 45px;
  color: #fff;
  padding: 0 20px;
  gap: 5px;
}
#androidApp .action-btn button span {
  padding: 0;
}
@media (max-width: 567px) {
  #androidApp {
    display: inline-block;
    text-align: center;
  }
  #androidApp .img-box {
    width: 80%;
    margin: auto;
  }
  #androidApp .action-btn {
    justify-content: center;
  }
}

@keyframes trial-glow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(19, 116, 200, 0.35);
  }
  50% {
    box-shadow: 0 0 14px 2px rgba(19, 116, 200, 0.6);
  }
}
@keyframes trial-glow-white {
  0%, 100% {
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.7);
  }
}
/* Gritter Notification Color Variants (replaces jGrowl) */
.gritter-default,
.gritter-success {
  background-color: #28a745 !important;
  color: #fff;
}

.gritter-error {
  background-color: #dc3545 !important;
  color: #fff;
}

.gritter-warning {
  background-color: #ffc107 !important;
  color: #333;
}

.gritter-info {
  background-color: #17a2b8 !important;
  color: #fff;
}

.alert {
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  font-size: small;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert .alert-container {
  width: 100%;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.alert p {
  margin: 0;
}
.alert a {
  font-weight: 700;
  text-decoration: none;
}
.alert a:hover {
  text-decoration: underline;
}
.alert i {
  font-size: 0.9375rem;
}
.alert .btn {
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.5rem;
  overflow: visible !important;
}
.alert .close {
  padding: 0 3px;
  display: inline-block;
  border-radius: 0.5rem;
  opacity: 1;
  font-size: 0.9375rem;
  color: #fff;
  text-shadow: none;
}
.alert .btn-close {
  position: static;
  margin-inline-start: auto;
  flex-shrink: 0;
  padding: 0;
}
.alert .form-maintenance {
  width: 100%;
}
@media (min-width: 900px) {
  .alert {
    font-weight: 400;
  }
}

.alert-danger {
  background-color: #ffe4e6 !important;
  border: 1.6px solid #f86365;
  color: #de2929;
}
.alert-danger i {
  color: #7d0c0c;
}
.alert-danger p,
.alert-danger a {
  color: #de2929;
}

.alert-success {
  background-color: #e6ffed !important;
  border: 1.6px solid #28a745;
  color: #155724;
}
.alert-success i {
  color: #19692c;
}
.alert-success p,
.alert-success a {
  color: #155724;
}

.alert-warning {
  background-color: #fff3cd !important;
  border: 1.6px solid #ffc107;
  color: #856404;
}
.alert-warning i {
  color: #856404;
}
.alert-warning p,
.alert-warning a {
  color: #856404;
}

.alert-primary {
  background-color: #e3f2fd !important;
  border: 1.6px solid #2196f3;
  color: #0d47a1;
}
.alert-primary i {
  color: #0d47a1;
}
.alert-primary p,
.alert-primary a {
  color: #0d47a1;
}

.alert-dark {
  background-color: #f5f5f5 !important;
  border: 1.6px solid #bdbdbd;
  color: #333333;
}
.alert-dark i {
  color: #757575;
}
.alert-dark p,
.alert-dark a {
  color: #333333;
}

.card {
  --bs-card-bg: #ffffff;
  --bs-card-color: #212529;
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-card-color);
}

.card.panel-inverse > .card-header {
  background-color: #1a2229 !important;
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.card.panel-inverse > .card-footer {
  background-color: #1a2229 !important;
  color: rgba(255, 255, 255, 0.7);
  border-top-color: rgba(255, 255, 255, 0.1);
}

.card.settings-cards {
  background: transparent !important;
  border: none !important;
}

.ppw-card {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-right: 4px solid #d97706;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.08);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.ppw-card:hover {
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.14);
}
.ppw-card.ppw-hidden {
  display: none;
}
@media (max-width: 767px) {
  .ppw-card {
    position: sticky;
    top: 60px;
    z-index: 20;
    border-radius: 8px;
  }
}
.ppw-card .ppw-card__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .ppw-card .ppw-card__body {
    padding: 18px 22px;
  }
}
@media (min-width: 1025px) {
  .ppw-card .ppw-card__body {
    padding: 16px 22px;
    align-items: center;
  }
}
.ppw-card .ppw-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(245, 158, 11, 0.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
  font-size: 17px;
}
@media (max-width: 767px) {
  .ppw-card .ppw-card__icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}
.ppw-card .ppw-card__content {
  flex: 1;
  min-width: 0;
}
.ppw-card .ppw-card__title {
  margin: 0 0 3px;
  font-size: clamp(14px, 1.6vw, 15px);
  font-weight: 700;
  color: #78350f;
}
.ppw-card .ppw-card__text {
  margin: 0 0 6px;
  font-size: clamp(13px, 1.4vw, 14px);
  color: #92400e;
  line-height: 1.65;
}
.ppw-card .ppw-card__details {
  display: none;
  background: #fef3c7;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 6px 0 8px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.7;
}
.ppw-card .ppw-card__details.ppw-expanded {
  display: block;
}
.ppw-card .ppw-card__details p {
  margin: 0;
}
.ppw-card .ppw-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 13px;
  background: #d97706;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 8px;
  transition: background 0.2s, box-shadow 0.2s;
}
@media (max-width: 767px) {
  .ppw-card .ppw-card__toggle {
    height: 44px;
    width: 100%;
    font-size: 13px;
  }
}
.ppw-card .ppw-card__toggle:hover {
  background: #b45309;
}
.ppw-card .ppw-card__toggle .ppw-toggle-icon {
  transition: transform 0.25s ease;
}
.ppw-card .ppw-card__toggle.ppw-open .ppw-toggle-icon {
  transform: rotate(180deg);
}
.ppw-card .ppw-card__dismiss {
  flex-shrink: 0;
  align-self: flex-start;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: #b45309;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 15px;
  transition: background 0.2s;
}
@media (min-width: 1025px) {
  .ppw-card .ppw-card__dismiss {
    align-self: center;
  }
}
.ppw-card .ppw-card__dismiss:hover {
  background: rgba(245, 158, 11, 0.12);
}

.poa-alert {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-right: 4px solid #d97706;
  border-radius: 9px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.07);
  overflow: hidden;
}
.poa-alert.poa-hidden {
  display: none;
}
.poa-alert .poa-alert__main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  flex-wrap: wrap;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .poa-alert .poa-alert__main {
    padding: 12px 20px;
    gap: 14px;
  }
}
@media (min-width: 1025px) {
  .poa-alert .poa-alert__main {
    flex-wrap: nowrap;
    padding: 11px 20px;
  }
}
.poa-alert .poa-alert__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(245, 158, 11, 0.13);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
  font-size: 15px;
}
@media (max-width: 767px) {
  .poa-alert .poa-alert__icon {
    align-self: flex-start;
    margin-top: 2px;
  }
}
.poa-alert .poa-alert__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
}
@media (max-width: 767px) {
  .poa-alert .poa-alert__body {
    flex-direction: column;
    gap: 3px;
  }
}
.poa-alert .poa-alert__title {
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 700;
  color: #78350f;
  white-space: nowrap;
  line-height: 1.4;
}
.poa-alert .poa-alert__text {
  font-size: clamp(12px, 1.3vw, 13px);
  color: #92400e;
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.poa-alert .poa-alert__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .poa-alert .poa-alert__actions {
    width: 100%;
    padding-top: 8px;
  }
}
.poa-alert .poa-alert__dismiss-btn, .poa-alert .poa-alert__policy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 13px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s;
  line-height: 1;
}
@media (max-width: 767px) {
  .poa-alert .poa-alert__dismiss-btn, .poa-alert .poa-alert__policy-btn {
    height: 44px;
    flex: 1;
    font-size: 13px;
  }
}
.poa-alert .poa-alert__policy-btn {
  background: transparent;
  color: #b45309;
  border: none;
}
.poa-alert .poa-alert__policy-btn .poa-toggle-icon {
  transition: transform 0.25s ease;
}
.poa-alert .poa-alert__policy-btn.poa-open .poa-toggle-icon {
  transform: rotate(180deg);
}
.poa-alert .poa-alert__policy-btn:hover {
  background: rgba(217, 119, 6, 0.07);
}
.poa-alert .poa-alert__dismiss-btn {
  background: #d97706;
  color: #fff;
  border: none;
}
.poa-alert .poa-alert__dismiss-btn:hover {
  background: #b45309;
}
.poa-alert .poa-alert__details {
  display: none;
  background: #fef3c7;
  border-top: 1px solid rgba(252, 211, 77, 0.55);
  padding: 11px 16px 13px;
  font-size: clamp(12px, 1.3vw, 13px);
  color: #92400e;
  line-height: 1.8;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .poa-alert .poa-alert__details {
    padding: 12px 20px 14px;
  }
}
@media (min-width: 1025px) {
  .poa-alert .poa-alert__details {
    padding: 11px 20px 14px;
  }
}
.poa-alert .poa-alert__details.poa-expanded {
  display: block;
}
.poa-alert .poa-alert__details p {
  margin: 0;
}

@keyframes pm-shimmer-ltr {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes pm-shimmer-rtl {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}
.pm-skeleton-cell {
  background: linear-gradient(105deg, #e9e9e9 0%, #e9e9e9 35%, #f6f6f6 50%, #e9e9e9 65%, #e9e9e9 100%);
  background-size: 300% 100%;
  animation: pm-shimmer-ltr 1.6s ease-in-out infinite;
  border-radius: 4px;
  display: block;
}

[dir=rtl] .pm-skeleton-cell {
  animation-name: pm-shimmer-rtl;
}

.pm-skeleton {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 0 !important;
  pointer-events: none;
}

.pm-sk-img-wrap {
  flex: 0 0 50px;
  height: 50px;
  overflow: hidden;
}

.pm-sk-img {
  width: 50px;
  height: 50px;
  border-radius: 6px;
}

.pm-sk-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-sk-line {
  height: 13px;
  border-radius: 4px;
  display: block;
}

@keyframes pm-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pm-row-new {
  animation: pm-fadein 0.25s ease forwards;
}

.float-pill {
  position: fixed;
  bottom: 8px;
  right: 10px;
  z-index: 1050;
}

.pill-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50px;
  border: 2px solid rgba(229, 57, 53, 0.4);
  animation: ringPulse 2.5s ease-out infinite;
  pointer-events: none;
}

.pill-btn {
  background: linear-gradient(135deg, #e53935, #c62828);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 9px 16px 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.25px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(229, 57, 53, 0.45);
  transition: all 0.25s ease;
  animation: pillGlow 2.5s ease-in-out infinite;
  white-space: nowrap;
  line-height: 1;
}
.pill-btn:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 8px 28px rgba(229, 57, 53, 0.6);
}

.pill-dot {
  padding: 0;
  width: 9px;
  height: 9px;
  background: white;
  border-radius: 50%;
  flex-shrink: 0;
  animation: dotBlink 1.5s ease-in-out infinite;
}

@keyframes pillGlow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.45);
  }
  50% {
    box-shadow: 0 4px 28px rgba(229, 57, 53, 0.7), 0 0 0 8px rgba(229, 57, 53, 0.1);
  }
}
@keyframes ringPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.15);
    opacity: 0;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}
@keyframes dotBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.4);
  }
}
#invoiceAlertModal .modal-dialog {
  max-width: 400px;
}
#invoiceAlertModal .modal-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
#invoiceAlertModal .modal-top {
  background: linear-gradient(135deg, #7f0000 0%, #b71c1c 40%, #e53935 100%);
  padding: 28px 24px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
#invoiceAlertModal .modal-top::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
#invoiceAlertModal .modal-top::after {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
#invoiceAlertModal .modal-close-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}
#invoiceAlertModal .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  color: white;
}
#invoiceAlertModal .modal-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 22px;
  color: white;
  position: relative;
  z-index: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
#invoiceAlertModal .modal-top h3 {
  color: white;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
#invoiceAlertModal .modal-top p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 11.5px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  margin: 0;
}
#invoiceAlertModal .modal-body-area {
  padding: 20px 22px;
}
#invoiceAlertModal .invoice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: #fff5f5;
  border-radius: 10px;
  border: 1px solid #ffcdd2;
  margin-bottom: 16px;
}
#invoiceAlertModal .invoice-row i {
  color: #e53935;
  font-size: 16px;
  flex-shrink: 0;
}
#invoiceAlertModal .invoice-row div {
  font-size: 11.5px;
  line-height: 1.5;
}
#invoiceAlertModal .invoice-row div strong {
  display: block;
  font-size: 12px;
  color: #b71c1c;
}
#invoiceAlertModal .modal-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#invoiceAlertModal .modal-btns .btn-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #e53935, #c62828);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(229, 57, 53, 0.35);
  text-decoration: none;
  transition: all 0.2s ease;
}
#invoiceAlertModal .modal-btns .btn-pay:hover {
  transform: translateY(-1px);
  color: white;
  text-decoration: none;
}
#invoiceAlertModal .modal-btns .btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 11px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
#invoiceAlertModal .modal-btns .btn-wa:hover {
  color: white;
  text-decoration: none;
  opacity: 0.9;
}
#invoiceAlertModal .modal-btns .btn-close-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: #aaa;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  padding: 9px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
#invoiceAlertModal .modal-btns .btn-close-modal:hover {
  border-color: #ccc;
  color: #666;
}

.renewal-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(183, 28, 28, 0.18);
  margin-bottom: 20px;
}
.renewal-card .rc-top {
  background: linear-gradient(135deg, #7f0000 0%, #b71c1c 45%, #e53935 100%);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.renewal-card .rc-top::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.renewal-card .rc-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  animation: iconPulse 2.5s ease-in-out infinite;
}
@keyframes iconPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}
.renewal-card .rc-text {
  flex: 1;
  position: relative;
  z-index: 1;
}
.renewal-card .rc-text h3 {
  color: white;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 5px;
}
.renewal-card .rc-text p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}
.renewal-card .rc-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.renewal-card .rc-actions .rc-btn-pay {
  background: white;
  color: #c62828;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.renewal-card .rc-actions .rc-btn-pay:hover {
  color: #c62828;
  text-decoration: none;
  transform: translateY(-1px);
}
.renewal-card .rc-actions .rc-btn-wa {
  background: #25d366;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.renewal-card .rc-actions .rc-btn-wa:hover {
  color: white;
  text-decoration: none;
  opacity: 0.9;
}
.renewal-card .rc-bottom {
  background: #fff5f5;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #ffcdd2;
  flex-wrap: wrap;
}
.renewal-card .rc-stat {
  display: flex;
  align-items: center;
  gap: 9px;
}
.renewal-card .rc-stat-icon {
  width: 32px;
  height: 32px;
  background: #ffebee;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e53935;
  font-size: 13px;
}
.renewal-card .rc-stat-txt {
  font-size: 11px;
  color: #777;
  line-height: 1.4;
}
.renewal-card .rc-stat-txt strong {
  display: block;
  font-size: 12px;
  color: #c62828;
}
.renewal-card .rc-divider {
  width: 1px;
  height: 28px;
  background: #ffcdd2;
}

@media (max-width: 768px) {
  .renewal-card .rc-top {
    flex-wrap: wrap;
  }
  .renewal-card .rc-top .rc-actions {
    width: 100%;
  }
  .renewal-card .rc-top .rc-actions .rc-btn-pay, .renewal-card .rc-top .rc-actions .rc-btn-wa {
    justify-content: center;
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .float-pill {
    bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
}
@media (max-width: 576px) {
  .float-pill {
    right: 14px;
  }
  .pill-btn .pill-dot {
    width: 7px;
    height: 7px;
  }
}
/*end widgets style*/
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 1em; /* opinion 3 */
  line-height: 1.4;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: "";
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}

[tooltip]::after {
  content: attr(tooltip);
  text-align: center;
  min-width: 3em;
  max-width: 30em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: 0.7ch;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip=""]::before,
[tooltip=""]::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^=up]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^=up]::after {
  bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^=up]::before,
[tooltip][flow^=up]::after {
  left: 50%;
  transform: translate(-50%, -0.5em);
}

/* FLOW: DOWN */
[tooltip][flow^=down]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}

[tooltip][flow^=down]::after {
  top: calc(100% + 5px);
}

[tooltip][flow^=down]::before,
[tooltip][flow^=down]::after {
  left: 50%;
  transform: translate(-50%, 0.5em);
}

/* FLOW: LEFT */
[tooltip][flow^=left]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-0.5em, -50%);
}

[tooltip][flow^=left]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-0.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^=right]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(0.5em, -50%);
}

[tooltip][flow^=right]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(0.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^=up]:hover::before,
[tooltip][flow^=up]:hover::after,
[tooltip][flow^=down]:hover::before,
[tooltip][flow^=down]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^=left]:hover::before,
[tooltip][flow^=left]:hover::after,
[tooltip][flow^=right]:hover::before,
[tooltip][flow^=right]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

@keyframes btn-flash-ring {
  0% {
    box-shadow: 0 0 8px 2px rgba(255, 252, 0, 0.65), 0 0 0 0 rgba(255, 252, 0, 0.6);
  }
  60% {
    box-shadow: 0 0 8px 2px rgba(255, 252, 0, 0.65), 0 0 0 16px rgba(255, 214, 0, 0.15);
  }
  100% {
    box-shadow: 0 0 8px 2px rgba(255, 252, 0, 0.65), 0 0 0 24px rgba(255, 170, 0, 0);
  }
}
.btn--flash {
  background-color: #fffc00 !important;
  border-color: #ece900 !important;
  color: #302d2d !important;
  font-weight: bold !important;
  animation: btn-flash-ring 1.6s ease-in-out infinite;
}

/*# sourceMappingURL=custom-style.css.map */