/*!
Script: FashionHub SaaS
Author: Papon IT Solution
Support: paponapp2244@gmail.com
Version: 4.0
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');


:root {
  /* Modern Blue Color Palette */
  --bs-blue: #0077b6;
  --bs-blue-light: #00b4d8;
  --bs-blue-dark: #03045e;
  --bs-indigo: #6366f1;
  --bs-purple: #7c3aed;
  --bs-pink: #ec4899;
  --bs-red: #ef4444;
  --bs-orange: #f97316;
  --bs-yellow: #eab308;
  --bs-green: #10b981;
  --bs-teal: #14b8a6;
  --bs-cyan: #06b6d4;
  --bs-black: #0F172A;
  --bs-white: #fff;
  --bs-gray: #64748B;
  --bs-gray-dark: #334155;
  --bs-gray-100: #F8FAFC;
  --bs-gray-200: #F1F5F9;
  --bs-gray-300: #E2E8F0;
  --bs-gray-400: #CBD5E1;
  --bs-gray-500: #94A3B8;
  --bs-gray-600: #64748B;
  --bs-gray-700: #475569;
  --bs-gray-800: #334155;
  --bs-gray-900: #1E293B;

  /* Primary is now blue */
  --bs-primary: #0077b6;
  --bs-secondary: #0096c7;
  --bs-success: #10b981;
  --bs-info: #06b6d4;
  --bs-warning: #f59e0b;
  --bs-danger: #ef4444;
  --bs-light: #F8FAFC;
  --bs-dark: #0F172A;

  /* RGB values for transparency */
  --bs-primary-rgb: 0, 119, 182;
  --bs-secondary-rgb: 0, 150, 199;
  --bs-success-rgb: 16, 185, 129;
  --bs-info-rgb: 6, 182, 212;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger-rgb: 239, 68, 68;
  --bs-light-rgb: 248, 250, 252;
  --bs-dark-rgb: 15, 23, 42;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 15, 23, 42;
  --bs-body-color-rgb: 30, 41, 59;
  --bs-body-bg-rgb: 250, 251, 252;

  /* Modern Typography */
  --bs-font-sans-serif: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-font-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --bs-gradient: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.9375rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-body-color: #1e293b;
  --bs-body-bg: #FAFBFC;

  /* Borders */
  --bs-border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #E2E8F0;
  --bs-border-color-translucent: rgba(15, 23, 42, 0.08);

  /* Border Radius */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 1.25rem;
  --bs-border-radius-pill: 50rem;

  /* Links */
  --bs-link-color: #0077b6;
  --bs-link-hover-color: #005f92;
  --bs-code-color: #7c3aed;
  --bs-highlight-bg: #FEF3C7;

  /* Modern Shadows */
  --bs-box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --bs-box-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --bs-box-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.03);
  --bs-box-shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent
}

.direction-ltr {
  direction: ltr;
}

.direction-rtl {
  direction: rtl;
}

.justify-items-end {
  justify-items: end !important;
}

.justify-items-center {
  justify-items: center !important;
}

.fs-7 {
  font-size: 14px !important;
}

.fs-8 {
  font-size: 12px !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.w-100vw {
  width: 100vw;
}


.h-fit-content {
  height: fit-content;
}

.box-shadow {
  box-shadow: 0 6px 30px rgb(182 186 203 / 30%);
}

.d-content {
  display: contents;
}

.object-fit-cover {
  object-fit: cover;
  object-position: center;
}

.object-fit-contain {
  object-fit: contain;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

.btn-rounded {
  border-radius: 30px;
}

.form-group,
.form-check {
  margin-bottom: 1rem;
}

*:focus {
  outline: none !important;
  box-shadow: none !important;
}

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

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.bg-white {
  background-color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary.padding,
.btn-secondary.padding {
  padding: 13px 26px;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-switch-success .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.form-check-input-secondary:checked {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.cursor-pointer {
  cursor: pointer;
}

.dn {
  display: none;
}

.hw-70 {
  width: 70px;
  height: 70px;
  object-fit: cover;
  object-position: center;
}

.h-40 {
  height: 40px;
}

.overflow-auto {
  overflow: auto;
}

/* Auth Pages */
.bg-primary-light {
  background-color: rgba(var(--bs-secondary-rgb), 0.25);
}

.social-list-item {
  height: 2rem;
  width: 2rem;
  line-height: calc(2rem - 0px);
  display: block;
  border-radius: 50%;
  color: var(--bs-white);
  text-align: center;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.bg-facebook {
  background-color: #1773EA;
}

.bg-google {
  background-color: #d24639;
}

/* Header */
.page-topbar {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: var(--bs-white);
  box-shadow: var(--bs-box-shadow);
}

.page-topbar .navbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}

.page-topbar .navbar-header .navbar-header-logo {
  background-color: var(--bs-primary);
  padding: 0 1.5rem;
  text-align: center;
  width: 250px;
}

.page-topbar .navbar-header .navbar-header-logo a {
  line-height: 70px;
  color: var(--bs-white);
}

.page-topbar .navbar-header .header-item {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  border: 0;
  color: #555b6d;
}

.page-topbar .navbar-header .header-item img {
  width: 36px;
  height: 36px;
  border: var(--bs-border);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/* Sidebar */
.sidebar {
  background-color: var(--bs-primary);
  width: 16.8rem;
  z-index: 1050;
  position: fixed;
  bottom: 0;
  top: 0;
  margin-top: 0;
  height: 100vh;
  padding: 0.8rem;
}

.sidebar .navbar-nav .nav-item .nav-link {
  color: rgba(var(--bs-white-rgb), 0.8);
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
}

.sidebar .navbar-nav .nav-item .nav-link:hover {
  background: linear-gradient(141.55deg, var(--bs-white) 3.46%, var(--bs-white) 99.86%), var(--bs-white);
  color: var(--bs-primary);
  transition: .3s ease-in-out;
}

.sidebar .navbar-nav .nav-item .nav-link.active {
  background: linear-gradient(141.55deg, var(--bs-white) 3.46%, var(--bs-white) 99.86%), var(--bs-white);
  color: var(--bs-primary);
}

/* Default */
.main-content {
  margin-left: 16.5rem;
}

.page-content {
  padding: calc(0px + 24px) calc(36px / 2) 60px calc(36px / 2);
}

/* Dashboard page */
.dashboard-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-card .card-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--bs-secondary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--bs-white);
}

/* User Page */
.search-box {
  display: inline-block;
  padding: 0 10px;
}

.search-box .form-control {
  border-radius: 30px;
  padding-left: 40px;
}

.search-box .search-icon {
  font-size: 16px;
  position: absolute;
  left: 13px;
  top: 0;
  line-height: 38px;
}

/* Pricing Plan page*/
.theme-selection li {
  display: inline-block;
  margin: 10px 5px;
  width: 165px;
}

.theme-selection li input[type=checkbox],
.theme-selection li input[type=radio] {
  display: none;
}

.theme-selection li label {
  padding: 5px;
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  margin: auto;
  border-radius: 5px;
}

.theme-selection li input:checked+label::before {
  content: "✓";
  transform: scale(1);
  z-index: 2;
}

.theme-selection li label::before {
  font-size: 15px;
  background-color: var(--bs-white);
  color: var(--bs-primary);
  content: "";
  display: block;
  border-radius: 50%;
  border: 1px solid var(--bs-primary);
  position: absolute;
  top: -6px;
  right: -6px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  transition-duration: 0.4s;
  transform: scale(0);
}

.theme-selection li input:checked+label img {
  z-index: -1;
  /* transition: 0.5s all ease-in-out; */
  border: 2px dotted var(--bs-primary);
}

.theme-selection li label:hover img {
  object-position: bottom;
}

.theme-selection li label img {
  width: 100%;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  object-fit: cover;
  object-position: top;
  height: 300px;
  transition: 4s all ease-in-out;
}

#themeinfo .theme-selection:hover img {

  object-position: bottom;

}

.theme-selection img {

  transition-duration: 0.2s;

  transform-origin: 50% 50%;

  object-fit: cover;

  object-position: top;

  height: 300px;

  transition: 4s all ease-in-out;

}

.available-btn {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 5%;
}

/* Setting Page */
.settings .card-sticky-top {
  position: sticky;
  top: 80px;
  z-index: 1020;
  background-color: transparent;
  height: 78vh;
  overflow-y: auto;
}

.settings .list-group-item .tab:hover,
.settings .list-group-item .tab.active {
  color: var(--bs-white);
}

.payments .card .cod-card,
.payments .card .wallet-card {
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  display: flex;
  justify-content: space-between;
}

/* Pricing plan checkout page */
.stripe-form #card-element .__PrivateStripeElement iframe {
  height: 40px !important;
  width: 100% !important;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  display: block;
  padding: 10px;
  margin-bottom: 16px;
}

/* Business Page */
.contact-info-modal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
}

.contact-info-item {
  border: var(--bs-border);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 5px;
  outline: none !important;
  overflow: visible;
  padding: 1rem;
  text-align: center;
  transition: .3s;
  width: auto;
  box-shadow: var(--bs-box-shadow);
}

.contact-info-modal .contact-info-item:hover {
  background-color: #e6ecfd;
}

.contact-info-modal .contact-info-item i {
  font-size: 22px;
  margin: 5px 0;
}

#service_repeater .img-overlay,
#services_card .img-overlay,
#testimonials_info .img-overlay,
#testimonial_repeater .img-overlay {
  position: absolute;
  top: 2%;
  right: 2%;
}

#reorder_section ul.list-group li.list-group-item {
  cursor: move;
}

/* Switch On/Off */
.checkbox-switch {
  display: none;
}

.switch {
  align-items: center;
  background-color: gray;
  border-radius: 500px;
  cursor: pointer;
  display: flex;
  height: 30px;
  justify-content: space-between;
  position: relative;
  user-select: none;
  width: 60px;
}

.checkbox-switch:checked~.switch {
  background-color: var(--bs-primary);
}

.checkbox-switch:not(:checked)~.switch {
  background-color: gray;
}

.switch__left,
.switch__right {
  color: white;
  font-size: small;
  text-transform: uppercase;
}

.checkbox-switch:checked~.switch .switch__left {
  visibility: hidden;
}

.checkbox-switch:not(:checked)~.switch .switch__right {
  visibility: hidden;
}

.switch__circle {
  height: 30px;
  padding: 5px;
  position: absolute;
  transition: all 0.1s linear;
  width: 30px;
}

.switch__circle-rtl {
  height: 30px;
  padding: 5px;
  position: absolute;
  transition: all 0.1s linear;
  width: 30px;
}

.checkbox-switch:checked~.switch .switch__circle {
  left: 0;
  right: calc(100% - 30px);
}

.checkbox-switch:checked~.switch .switch__circle-rtl {
  left: calc(100% - 30px);
  right: 0;
}

.checkbox-switch:not(:checked)~.switch .switch__circle {
  left: calc(100% - 30px);
  right: 0;
}

.checkbox-switch:not(:checked)~.switch .switch__circle-rtl {
  right: calc(100% - 30px);
  left: 0;
}

.switch__circle-inner {
  background-color: white;
  border-radius: 50%;
  display: block;
  height: 100%;
  width: 100%;
}

.hw-50 {
  width: 50px;
  height: 50px;
  object-fit: cover;
  object-position: center;
}

.service-image {
  height: 150px;
}

/* extra....apexa */
/* FOR SIDEBAR -- START */
.sidebar .navbar-nav {
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 100px;
}

.sidebar .navbar-nav::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.sidebar .navbar-nav::-webkit-scrollbar {
  width: 2px;
  background-color: #495057;
}

.sidebar .navbar-nav::-webkit-scrollbar-thumb {
  background-color: #fff;
}

.sidebar .navbar-nav {
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 100px;
}

.left-padding-rtl {
  padding-left: .8rem !important;
}

.right-padding-ltr {
  padding-right: .8rem !important;
}

.sidebar .navbar-nav .nav-item .nav-link:hover {
  background: rgba(255, 255, 255, 1) !important;
  color: var(--bs-primary);
  transition: .3s ease-in-out;
}

.sidebar .navbar-nav .nav-item .nav-link.active,
.sidebar .navbar-nav .multimenu .active-main {
  background: rgba(255, 255, 255, 1) !important;
  color: var(--bs-primary);
}

.sidebar .navbar-nav .nav-item ul li a {
  border-bottom: 1px solid transparent;
  color: rgba(var(--bs-white-rgb), 0.8);
  background: transparent !important;
}

.sidebar .navbar-nav .nav-item .nav-link i {
  -webkit-box-flex: 0;
  flex: 0 0 1.5rem;
  -ms-flex: 0 0 1.5rem;
}

/* FOR SIDEBAR -- START */
/* -----------------------------------------------------------------------------
------------------------- EXTRA-CSS-BY-RAHUL ----  START -----------------------
-------------------------------------------------------------------------------- */
.text-underline {
  text-decoration: underline;
}

.hw-20 {
  height: 20px;
  width: 20px;
  object-fit: cover;
  object-position: center;
}

/* FOR_SIDEBAR_START */
.sidebar .navbar-nav .nav-item .multimenu-menu-indicator i {
  -webkit-box-flex: 0;
  flex: 0 0 1rem;
  -ms-flex: 0 0 1rem;
  font-size: 10px;
}

.sidebar .navbar-nav .nav-item .nav-link[aria-expanded=true]:after {
  transform: rotate(-180deg);
}

.sidebar .navbar-nav .nav-item .nav-link:after {
  transition: all .3s;
}

/* FOR_SIDEBAR_END */
/* tracking-bar-start */
.progress-barrr {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
}

.progress-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.progress-step:before,
.progress-step:after {
  background-color: var(--bs-secondary);
  content: "";
  height: 2px;
  position: absolute;
  z-index: -1;
  top: 15px;
}

.progress-step:after {
  left: 50%;
  width: 100%;
}

.progress-step:last-of-type.is-active:after {
  background-color: var(--bs-secondary);
}

.progress-step:last-of-type:after {
  left: 50%;
  width: 50%;
}

.progress-step .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--bs-secondary);
  line-height: 35px;
  z-index: 100;
  border: 1px solid var(--bs-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.progress-step.is-active~.progress-step:not(.is-active) .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: gray;
  line-height: 35px;
  z-index: 100;
  border: 1px solid gray;
  font-size: 1rem;
  font-weight: 500;
}

.progress-step.is-active .step-description {
  font-weight: 500;
}

.progress-step.is-active:after {
  background-color: gray;
}

.progress-step.is-active~.progress-step .step-count {
  background-color: #fff;
}

.progress-step.is-active~.progress-step:after {
  background-color: gray;
}

.step-description {
  font-size: 0.8rem;
}

@media screen and (min-width: 640px) {
  .progress-step:first-of-type:before {
    right: 50%;
    width: 50%;
  }
}

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

  .progress-step:first-of-type:before,
  .progress-step:last-of-type:after {
    display: none !important;
  }
}

/* tracking-bar-end */
/* FOR_ERRORS_PAGE_START */
.error-content {
  font-size: 30px;
  font-weight: bold;
}

@media (max-width:767px) {
  .error-sec-order {
    order: 2;
  }
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: #12121220 !important;
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}

/* FOR_ERRORS_PAGE_END */
/* -----------------------------------------------------------------------------
------------------------- EXTRA-CSS-BY-RAHUL ----  END -------------------------
-------------------------------------------------------------------------------- */
.transaction-select {
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.product-image {
  height: 150px;
}

.dropdown-menu-language {
  position: absolute !important;
  left: -60px !important;
  top: 15px !important;
  box-shadow: 0px 0px 13px -3px rgb(0 0 0 / 10%);
}

/* New login form */
/* New login form  start */
.login-page-img {
  width: 100%;
}

.login-form-bg-color {
  background-color: white;
}

.login-form-bottom-icon {
  gap: 8px;
}

.login-with-bottom-title {
  font-family: var(--bs-body-font-family);
  font-weight: 500;
}

.icon-btn-facebook {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #3d5a9e !important;
  border: none !important;
}

.icon-btn-twitter {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1ba1f4 !important;
  border: none !important;
}

.icon-btn-google {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #d82433 !important;
  border: none !important;
}

.dropdown-hover a:hover {
  background-color: white !important;
}

.login-imag {
  width: 145px;
}


.my-30px {
  margin-top: 30px;
  margin-bottom: 30px;
}

/* New login form  End */

/* rtl css */
.main-content-rtl {
  margin-right: 16.5rem;
}

.dropdown-toggle-rtl {
  white-space: nowrap;
}

.dropdown-toggle-rtl::after {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.progress-step-rtl {
  text-align: center;
  position: relative;
  z-index: 1;
}

.progress-step-rtl:before,
.progress-step-rtl:after {
  background-color: var(--bs-primary);
  content: "";
  height: 2px;
  position: absolute;
  z-index: -1;
  top: 15px;
}

.progress-step-rtl:after {
  right: 50%;
  width: 100%;
}

.progress-step-rtl:last-of-type.is-active:after {
  background-color: var(--bs-primary);
}

.progress-step-rtl:last-of-type:after {
  left: 50%;
  width: 50%;
}

.progress-step-rtl .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--bs-primary);
  line-height: 35px;
  z-index: 100;
  border: 1px solid var(--bs-primary);
  font-size: 1rem;
  font-weight: 500;
}

.progress-step-rtl .step-count {
  border-radius: 50%;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
}

.progress-step-rtl.is-active~.progress-step-rtl:not(.is-active) .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: gray;
  line-height: 35px;
  z-index: 100;
  border: 1px solid gray;
  font-size: 1rem;
  font-weight: 500;
}

.progress-step-rtl.is-active .step-description {
  font-weight: 500;
}

.progress-step-rtl.is-active:after {
  background-color: gray;
}

.progress-step-rtl.is-active~.progress-step-rtl .step-count {
  background-color: #fff;
}

.progress-step-rtl.is-active~.progress-step-rtl:after {
  background-color: gray;
}

.step-description {
  font-size: 0.8rem;
}

@media screen and (min-width: 640px) {
  .progress-step-rtl:first-of-type:before {
    left: 50%;
    width: 50%;
  }
}

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

  .progress-step-rtl:first-of-type:before,
  .progress-step-rtl:last-of-type:after {
    display: none !important;
  }
}

.accordion-button-rtl {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}

.accordion-button-rtl::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-right: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}

.accordion-button-rtl:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: #12121220 !important;
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}

.input-group-rtl {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group-icon-rtl {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.breadcrumb-rtl::before {
  float: right !important;
  padding-left: var(--bs-breadcrumb-item-padding-x) !important;
  padding-right: var(--bs-breadcrumb-item-padding-x) !important;
  color: var(--bs-breadcrumb-divider-color) !important;
  content: var(--bs-breadcrumb-divider, "/") !important;
}

div.dataTables_wrapper div.dataTables_filter input {
  margin-right: 5px !important;
}

/* extra css dev */

.login-form-bottom-icon a {
  min-width: max-content;
}

.input-h {
  height: 45px;
}

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


/* extra css dev */
.img-height {
  height: 70px;
}

.h-100vh {
  height: 100vh;
}

.icon-bar {
  position: fixed;
  top: 90%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 100;
  right: 2%;
}



/*=========================================================================== 
                                      POS
=============================================================================*/


/*================= pos section header start =================*/

.pos-header {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: var(--bs-white);
  box-shadow: var(--bs-box-shadow);
  padding: 5px 0px;
}

.pos-header .logo img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/*================= pos section search box start =================*/

.search-input {
  background-color: transparent;
  border: none;
  border-radius: 5px;
  width: 100%;
  position: relative;
}

.pos-card-input i {
  color: #c3c8da;
}

.pos-card-input {
  background-color: var(--bs-body-bg);
  display: flex;
  align-items: center;
  border: none;
  box-shadow: none;
}

.card-body .search-button {
  right: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  border: none;
  padding: 15px 50px;
  border-radius: 6px;
  background-color: var(--bs-primary);
  cursor: pointer;
}

/*================= pos categorys start =================*/

.pos-categorys .scroll-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
  height: auto;
  background-color: #fff;
  padding: 16px;
}

.pos-categorys .scroll-wrapper ul li {
  display: inline-block;
}

.pos-categorys .scroll-wrapper .cats,
.pos-categorys .scroll-wrapper .cats:focus {
  width: auto;
  text-transform: capitalize;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 5px;
  display: block;
  margin: 7px 0px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
}

/*----- Pos header active class -----*/

.pos-categorys .scroll-wrapper ul li .active {
  background-color: var(--bs-primary);
  color: #fff;
}

/*----- Pos header active class -----*/


.offcanvas {
  max-width: 100% !important;
}


/*================= pos menu start =================*/
.pos-menu {
  overflow-y: auto;
  overflow-x: hidden;
  height: 72vh;
  padding: 0px 10px;
}

.pos-menu .pro-img img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.pos-menu .pro-title {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  margin-bottom: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pos-menu p {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 300;
  font-size: 14px;
}

.pos-menu .pro-price {
  font-size: 18px;
  font-weight: 500;
  color: var(--bs-primary);
}

.pos-img img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  object-fit: cover;
}

/*------- pos invoice css -------*/

.pos-modal {
  color: #000;
}

.pos-modal .order-details,
.pos-modal .store-details {
  border-bottom: 2px dotted lightgray;
}

.pos-modal .items-details .items,
.pos-modal .total-amount .items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px dotted lightgray;
}


.pos-menu .pagination .page-item input {
  max-width: 60px;
  width: 100%;
  text-align: center;
}


.righ-side .input-group span,
.righ-side .input-group input {
  background-color: var(--bs-body-bg) !important;
}

/*=========================== righ-side ===========================*/
.righ-side {
  margin-left: auto;
}

/*================ price-range ================*/

.righ-side .price-range .circle,
.offcanvas .offcanvas-body .price-range .circle,
.modal .modal-footer .price-range .circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
}

.righ-side .price-range .fa-minus,
.righ-side .price-range .fa-plus,
.offcanvas .offcanvas-body .price-range .fa-minus,
.offcanvas .offcanvas-body .price-range .fa-plus,
.modal .modal-footer .price-range .fa-minus,
.modal .modal-footer .price-range .fa-plus {
  font-weight: 400 !important;
}

.righ-side .price-range .circle:hover,
.offcanvas .offcanvas-body .price-range .circle:hover,
.modal .modal-footer .price-range .circle:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

.righ-side.righ-side .price-range input,
.offcanvas .offcanvas-body .price-range input,
.modal .modal-footer .price-range input {
  width: 20%;
  margin: 0px 5px;
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  background-color: transparent;
}

/*================ total-sec ================*/
.righ-side .total-sec h6,
.offcanvas .offcanvas-body .total-sec h6 {
  color: #000;
  font-weight: 400;
  font-size: 16px;
}

.righ-side .total-sec span,
.offcanvas .offcanvas-body .total-sec span {
  color: #000;
  font-weight: 600;
  font-size: 16px;
}

/*================ pro-itmes ================*/
.offcanvas .offcanvas-body {
  overflow-y: auto;
  height: 100vh;
}

#cartview .card .desktop-card-body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 93vh;
}

.righ-side .payment-option .payment-title h5,
.offcanvas .offcanvas-body .payment-option .payment-title h5 {
  color: #000;
}

.righ-side .pro-itmes .card,
.righ-side .total-sec .card,
.offcanvas .offcanvas-body .pro-itmes .card,
.offcanvas .offcanvas-body .total-sec .card {
  background-color: var(--bs-body-bg);
}

.righ-side .pro-itmes .card .card-body,
.offcanvas .offcanvas-body .pro-itmes .card .card-body {
  padding: 12px;
}


.pro-itmes .pro-title {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  margin-bottom: 15px;
}

.pro-itmes .card .pro-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--bs-primary);
}

/*================= payment-option =================*/
.righ-side .payment-option label,
.offcanvas .offcanvas-body .payment-option label {
  width: 100%;
}

.righ-side .payment-option .card-input-element,
.offcanvas .offcanvas-body .payment-option .card-input-element {
  display: none;
}

.righ-side .payment-option .card,
.offcanvas .offcanvas-body .payment-option .card {
  cursor: pointer;
}

.righ-side .payment-option .card-input-element:checked+.card,
.offcanvas .offcanvas-body .payment-option .card-input-element:checked+.card {
  box-shadow: 0 0 1px 1px #000;
}


/*----------------- Scrollbar css -----------------*/

.pos-categorys .scroll-wrapper::-webkit-scrollbar,
.pos-menu::-webkit-scrollbar,
.desktop-card-body::-webkit-scrollbar,
.offcanvas .offcanvas-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.pos-categorys .scroll-wrapper::-webkit-scrollbar-track,
.pos-menu::-webkit-scrollbar-track,
.desktop-card-body::-webkit-scrollbar-track,
.offcanvas .offcanvas-body::-webkit-scrollbar-track {
  background-color: transparent !important;
}

.pos-categorys .scroll-wrapper::-webkit-scrollbar-thumb,
.pos-menu::-webkit-scrollbar-thumb,
.desktop-card-body::-webkit-scrollbar-thumb,
.offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
  background: lightgray !important;
  border-radius: 10px !important;
}

/*----------------- Scrollbar css -----------------*/

.currency input {
  background-color: #ecf0fa;
}


/*---------------- floating-label ----------------*/

/* .floating-label {} */

.floating-label {
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 5%;
  left: 5%;
  border: 2px solid var(--bs-primary);
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0px 0px 10px 2px var(--bs-primary);
  color: var(--bs-primary);
  font-size: 18px;
}


.variants .title {
  text-transform: capitalize;
  font-weight: 500;
  font-size: 16px;
  color: var(--bs-primary);
}

.pos-menu .card .active {
  border: 1px solid grey;
  border-radius: var(--bs-border-radius-xl) !important;
}


/*********************** load css ***********************/

.load {
  width: 20px;
  height: 20px;
  border: solid 3px #000;
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  -webkit-transition: all 0.5s ease-in;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  transition: all 0.5s ease-in;
  animation-name: rotate;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin: 0px 8px !important;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


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

  to {
    -webkit-transform: rotate(360deg);
  }
}

.h-24 {
  height: 24px;
}

.card .pro-content .fa-circle-plus {
  font-size: 24px;
}

/*********************** pos btn css ***********************/

.righ-side .btn.active,
.righ-side .btn:active,
.righ-side .btn:focus {
  color: #fff !important;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.cuppon-offer {
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  font-weight: 500;
  color: #17b31b;
  cursor: pointer;
}

.coupon_codewrapper {
  position: relative;
  overflow: hidden;
}

.coupon_codewrapper .coupon_circle1 {
  left: -6px;
  border: 1px solid var(--bs-primary);
  height: 12px;
  width: 12px;
  background-color: #fff;
  position: absolute;
  top: 12px;
  border-radius: 50%;
  z-index: 1;
}

.coupon_codewrapper .coupon_circle2 {
  right: -6px;
  border: 1px solid var(--bs-primary);
  height: 12px;
  width: 12px;
  background-color: #fff;
  position: absolute;
  top: 12px;
  border-radius: 50%;
  z-index: 1;
}

.coupon_codewrapper .coupon_couponcode {
  padding: 5px 12px;
  border: 1px solid var(--bs-primary);
  border-radius: 2px;
  color: #000;
}

.plan-card-active {
  border: 1px solid var(--bs-primary) !important;
}

/* share css */
div#social-links {
  margin: 0 auto;
  max-width: 500px;
}

div#social-links ul li {
  display: inline-block;
}

div#social-links ul li a .fa-facebook-square {
  color: #3b5998;
}

div#social-links ul li a .fa-twitter {
  color: #00acee;
}

div#social-links ul li a .fa-linkedin {
  color: #0072b1;
}

div#social-links ul li a .fa-telegram {
  color: #0088cc;
}

div#social-links ul li a .fa-whatsapp {
  color: #25D366;
}

div#social-links ul li a .fa-reddit {
  color: #FF4500;
}

div#social-links ul li a {
  padding: 12px;
  margin: 4px;
  font-size: 30px;
}

.w-90 {
  width: 90px;
}

#DataTables_Table_0_length {
  margin-bottom: 10px;
  text-align: end;
  margin-right: 10px;
}

.lag-img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  object-fit: cover !important;
}

.login-lang .btn.dropdown-toggle:hover {
  border: none;
}


.theme-label {
  color: var(--white);
  background: var(--bs-primary);
  width: auto;
  height: auto;
  cursor: pointer;
  z-index: 1024;
  border-radius: 8px 8px 0 0;
  padding: 10px 40px;
  position: fixed;
  top: 50%;
  right: -67px;
  transform: rotate(270deg);
  display: flex;
  align-items: center;
  transition: .3s all ease;
}

.them-name-images {
  width: 100%;
  transform-origin: 50% 50%;
  object-fit: cover;
  object-position: top;
  height: 200px;
  transition: 2s all ease-in-out;
  cursor: pointer;
  border-radius: 2rem;
  border: 1px solid #000;
}

.them-name-images:hover {
  object-position: bottom;
}



/* START TOOLTIP STYLES */
[tooltip] {
  position: relative;
}

[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-weight: 200;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: '';
  border: 5px solid transparent;
  z-index: 1001;
}

[tooltip]::after {
  content: attr(tooltip);
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* 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%, -.5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .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 {
  animation: tooltips-vert 300ms ease-out forwards;
}

.login-right-content {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.register-padding {
  padding: 48px;
}

.login-right-content::-webkit-scrollbar {
  display: none;
}


/* ====== login title ======= */
.title-text {
  font-size: 35px;
}



.text-decoration {
  text-decoration: underline !important;
}

.login-with-border {
  height: 1px;
  width: 100%;
  background-color: #b8b8b8;
}

.text-color {
  color: #121212;
}

/* new one */
.one-card {
  background-color: #eff3f6;
  height: 100%;
  width: 100%;
  padding: 0px;
  border: 0px;
  overflow: hidden;
  border-radius: 0px;
  position: relative;
}

.one-card .one-img {
  height: 200px;
  width: 100%;
  overflow: hidden;
}

.one-card .one-img img {
  height: 200px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

.one-card .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

.one-card .card-footer {
  border: none;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}

.one-card .card-footer p {
  font-weight: 600;
  text-transform: capitalize;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 1px;
  word-break: break-all;
  font-size: 14px;
}

.one-card .dropdown {
  position: absolute;
  top: 8px;
  right: 8px;
}

.one-card .one-card-dropdown,
.one-card .one-card-dropdown:is(:hover, :active, :focus, .show) {
  width: 25px;
  height: 25px;
  background-color: var(--bs-secondary) !important;
  color: #fff;
  font-size: 15px;
  border-radius: 0px;
  cursor: pointer;
  border: none !important;
  padding-top: 2px;
}

.one-card .dropdown-toggle::after {
  display: none;
}

.one-card .dropdown-menu {
  min-width: fit-content;
  border-radius: 0px;
  border: none;
  margin-top: 2px !important;
}

.one-card .dropdown-menu li .dropdown-item {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.one-card .dropdown-item:hover {
  background-color: var(--bs-secondary);
  color: #fff;
}


.dropdown-menu.ltr {
  top: 0px !important;
  right: 0px !important;
}

.dropdown-menu.rtl {
  top: 0px !important;
  left: 0px !important;
}

.sort_menu .card .card-header {
  color: #000;
  background-color: var(--bs-secondary) !important;
  /* background-color: rgb(from #96c13e r g b / .2); */
  box-shadow: inset 0 calc(var(--bs-accordion-border-width)* -1) 0 var(--bs-accordion-border-color);
  font-size: 18px;
  padding: 16px 20px;
}

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

.empty-scroll {
  height: calc(77vh + (100 - 44) * ((100vw - 320px) / (1920 - 320)));
  overflow: auto;
}

.m-empty-scroll {
  height: 80vh;
}

/* .item-stock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 9;
  border-radius: 10px;
} */

.extra-padding {
  padding: 13px 26px !important;
}

/* ========================dhruvil add extra css=================== */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary)
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary)
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #31d2f2;
  --bs-btn-hover-border-color: #25cff2;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: ##fff;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px #fff(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 45, 41, 66;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-gradient: none
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary) !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary) !important;
  --bs-btn-hover-border-color: var(--bs-primary) !important;
  --bs-btn-focus-shadow-rgb: 45, 41, 66;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary) !important;
  --bs-btn-active-border-color: var(--bs-primary) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-primary) !important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary) !important;
  --bs-gradient: none
}

/* .dropdown-menu {
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: #212529;
  --bs-dropdown-bg: #fff;
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: 0.375rem;
  --bs-dropdown-border-width: 1px;
  --bs-dropdown-inner-border-radius: calc(0.375rem - 1px);
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-dropdown-link-color: #212529;
  --bs-dropdown-link-hover-color: #1e2125;
  --bs-dropdown-link-hover-bg: #e9ecef;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #adb5bd;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: 14px;
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius)
} */

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #31d2f2;
  --bs-btn-hover-border-color: #25cff2;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px #fff(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px #fff(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #000;
  --bs-btn-disabled-border-color: #000;
}

.btn.hov:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.card {
  --bs-card-bg: #fff;
}

.settings .list-item-primary.active,
.settings .list-item-primary.active a {
  z-index: 2;
  color: #FFF;
  font-weight: 500;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary);
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: #fff;
}

.settings .list-item-secondary.active,
.settings .list-item-secondary.active a {
  z-index: 2;
  font-weight: 500;
  color: #FFF;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary);
}

.form-select {
  background-color: #fff !important;
}

.form-control:focus,
.form-select:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #ced4da;
}

.form-control:disabled {
  background-color: var(--bs-secondary-bg) !important;
  opacity: 1;
}

.btn-outline-info {
  --bs-btn-hover-color: #fff !important;
}

.form-control {
  font-size: 14px !important;
  background-color: #fff !important;
}

.pagination {
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

.progress {
  --bs-progress-bar-bg: var(--bs-primary);
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important
}

.active>.page-link,
.page-link.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff !important;
}

.text-primary {
  --bs-text-opacity: 1;
  color: var(--bs-primary) !important
}

a {
  color: var(--bs-link-color);
  text-decoration: none
}

.nav-tabs {
  --bs-nav-tabs-link-active-bg: #fff !important;
}

.table {
  --bs-table-bg: transparent !important;
}

.list-group {
  --bs-list-group-bg: #fff !important;
}

.list-group-item {
  background-color: var(--bs-list-group-bg) !important;
}

.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.checkbox-reviw input[type='checkbox'] {
  accent-color: #000;
}

.custom-control-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.lag-img {
  width: 25px !important;
  height: 25px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50%;
}

.min-dropdown-ltr {
  position: absolute !important;
  left: -129px !important;
}

.min-dropdown-rtl {
  position: absolute !important;
  left: 0px !important;
}

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

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

.login-admin .image-1 {
  width: 100%;
  height: 100%;
}

.img-logo img {
  height: 60px;
}

.login-admin .row {
  width: 100%;
  height: 100%;
}

.object {
  object-fit: cover !important;
  object-position: center !important;
}

.login-admin .image-1 img {
  width: 100%;
  height: 100%;
}

.text-muted {
  --bs-text-opacity: 1;
  color: #64748b !important;
}

.dataTables_empty {
  font-size: 15px;
  font-weight: 600;
}

.dataTables_info {
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.sorting {
  font-size: 15px !important;
  font-weight: 500;
}

.form-group label,
.form-label {
  font-size: 15px !important;
  font-weight: 500;
  color: #1e293b;
  /* margin: 0px !important; */
}

.filter-option {
  font-size: 14px !important;
}

.form-group input {
  font-size: 14px !important;
}

.form-group .form-select {
  font-size: 14px !important;
}

.form-group textarea {
  font-size: 14px !important;
}

.dataTables_paginate .pagination .page-item .page-link {
  font-size: 14px !important;
  font-weight: 500;
}

.pagination .page-item .page-link {
  font-size: 14px !important;
  font-weight: 500;
}

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

.header-bar .navbar .min-dropdown-ltr {
  position: absolute !important;
  left: -128px !important;
  top: 100% !important;
}

.header-bar .navbar .min-dropdown-rtl {
  position: absolute !important;
  left: 0px !important;
  top: 100% !important;
}

.hov {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hight-50 {
  height: 50px !important;
  object-fit: cover;
  object-position: center;
}

.card-title {
  color: #0f172a;
  font-weight: 600;
}

.modal-content {
  background-color: #fff;
}

.header-btn-icon {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-side {
  border-right: 2px dotted rgb(215, 214, 214);
  padding-right: 1px;
}

.right-side {
  /* width: 40% !important; */
  position: relative;
}

.right-side {
  border-left: 2px dotted rgb(215, 214, 214);
  padding-left: 1px;
}

.coupon .coupn-circle-up-left {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgb(215, 214, 214);
  border-radius: 100%;
  left: -11px;
}

.coupon .coupn-circle-up-right {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgb(215, 214, 214);
  border-radius: 100%;
  right: -11px;
}

.cursor-pointer label {
  font-size: 13px;
  color: #000;
  text-transform: capitalize;
}

/* ======== Alert Warning ======= */
.alert-warning {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: rgb(from var(--bs-secondary) r g b / .2);
  --bs-alert-border-color: rgb(from var(--bs-secondary) r g b / .2);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.coupon .coupn-circle-up {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgb(215, 214, 214);
  border-radius: 100%;
  left: -11px;
}

.bg-gray {
  background-color: rgb(229 229 229);
}

.form-check-input:focus {
  border-color: var(--bs-border-color);
}

.text-dark {
  color: #0f172a !important;
}

.btn-light {
  --bs-btn-color: #000000;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon_box {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.settings-color {
  color: #000;
}

.bootstrap-select>.dropdown-toggle {
  padding: .375rem .75rem;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-dropdown-link-active-color) !important;
  text-decoration: none;
  background-color: #000000;
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--bs-dropdown-link-hover-color);
  background-color: #ffffff;
}

.sub-plan {
  padding: 16px 20px;
}

/* ========= */
.dasbord-img {
  width: 35px;
  height: 35px;
}

.quer-code {
  width: 100px;
  height: 100px;
}

.line-2 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.line-1 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.line-3 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.h-10-px {
  height: 10px;
}

.gradient-6 {
  background-image: linear-gradient(135deg, #97ABFF 10%, #123597 100%);
}

/* ========= Dashboard Improvements - Brand Color Palette ========= */
/* Brand Colors: #9d0208 (crimson), #faa307 (golden orange), #2b9348 (forest green), #0077b6 (ocean blue) */

/* Vibrant Gradient Backgrounds */
.bg-gradient-purple {
  background: linear-gradient(135deg, #9d0208 0%, #b00309 100%) !important;
}

.bg-gradient-blue {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%) !important;
}

.bg-gradient-green {
  background: linear-gradient(135deg, #2b9348 0%, #40a85a 100%) !important;
}

.bg-gradient-orange {
  background: linear-gradient(135deg, #faa307 0%, #fbb627 100%) !important;
}

.bg-gradient-pink {
  background: linear-gradient(135deg, #9d0208 0%, #faa307 100%) !important;
}

.bg-gradient-teal {
  background: linear-gradient(135deg, #0077b6 0%, #2b9348 100%) !important;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%) !important;
}

.bg-gradient-success {
  background: linear-gradient(135deg, #2b9348 0%, #40a85a 100%) !important;
}

.bg-gradient-info {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%) !important;
}

.bg-gradient-warning {
  background: linear-gradient(135deg, #faa307 0%, #fbb627 100%) !important;
}

.bg-gradient-danger {
  background: linear-gradient(135deg, #9d0208 0%, #b00309 100%) !important;
}

/* Gradient Buttons */
.btn-gradient-primary {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
  border: none;
  color: #fff;
  transition: all 0.3s ease;
}

.btn-gradient-primary:hover {
  background: linear-gradient(135deg, #005f8a 0%, #0077b6 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 119, 182, 0.4);
}

/* Welcome Card with Animated Background */
.dashboard-welcome-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  position: relative;
  border: none !important;
}

.dashboard-welcome-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.08) 0%, rgba(43, 147, 72, 0.08) 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
}

/* Dashboard Avatar */
.dashboard-avatar {
  position: relative;
  width: 60px;
  height: 60px;
}

.dashboard-avatar img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 15px rgba(0, 119, 182, 0.3);
}

.dashboard-avatar-status {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* Mini QR Code */
.dashboard-qr-mini {
  width: 50px;
  height: 50px;
  padding: 3px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dashboard-qr-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Dashboard Gradient Stat Cards */
.dashboard-stat-card-gradient {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.dashboard-stat-card-gradient:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.dashboard-stat-card-gradient .card-body {
  padding: 1.5rem;
}

.dashboard-stat-card-gradient .card-footer {
  padding: 0.75rem 1.5rem;
}

/* Individual Gradient Card Colors - Brand Palette (4 Distinct Colors) */
/* Color 1: Crimson Red #9d0208 */
.stat-gradient-purple {
  background: linear-gradient(135deg, #9d0208 0%, #b00309 100%);
  box-shadow: 0 10px 30px rgba(157, 2, 8, 0.35);
}

/* Color 2: Golden Orange #faa307 */
.stat-gradient-blue {
  background: linear-gradient(135deg, #faa307 0%, #fbb627 100%);
  box-shadow: 0 10px 30px rgba(250, 163, 7, 0.35);
}

/* Color 3: Forest Green #2b9348 */
.stat-gradient-orange {
  background: linear-gradient(135deg, #2b9348 0%, #40a85a 100%);
  box-shadow: 0 10px 30px rgba(43, 147, 72, 0.35);
}

/* Color 4: Ocean Blue #0077b6 */
.stat-gradient-green {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
  box-shadow: 0 10px 30px rgba(0, 119, 182, 0.35);
}

/* Mixed Gradients */
.stat-gradient-pink {
  background: linear-gradient(135deg, #9d0208 0%, #faa307 100%);
  box-shadow: 0 10px 30px rgba(157, 2, 8, 0.35);
}

.stat-gradient-teal {
  background: linear-gradient(135deg, #0077b6 0%, #2b9348 100%);
  box-shadow: 0 10px 30px rgba(0, 119, 182, 0.35);
}

/* Stat Icon for Gradient Cards */
.stat-icon-gradient {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: #fff;
  flex-shrink: 0;
}

/* Stat Content Wrapper - prevents overflow */
.stat-content-wrapper {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 70px);
}

/* Auto-fit stat values for large numbers */
.stat-value-autofit {
  font-size: clamp(1rem, 4vw, 1.75rem);
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive adjustments for stat cards */
@media (max-width: 1399.98px) {
  .stat-value-autofit {
    font-size: clamp(0.9rem, 3.5vw, 1.5rem);
  }
  .stat-icon-gradient {
    width: 50px;
    height: 50px;
  }
  .stat-content-wrapper {
    max-width: calc(100% - 60px);
  }
}

@media (max-width: 1199.98px) {
  .stat-value-autofit {
    font-size: clamp(1rem, 4vw, 1.75rem);
  }
  .stat-icon-gradient {
    width: 55px;
    height: 55px;
  }
}

@media (max-width: 767.98px) {
  .stat-value-autofit {
    font-size: clamp(0.95rem, 3.5vw, 1.4rem);
  }
  .stat-icon-gradient {
    width: 48px;
    height: 48px;
  }
  .stat-content-wrapper {
    max-width: calc(100% - 55px);
  }
}

@media (max-width: 575.98px) {
  .stat-value-autofit {
    font-size: clamp(0.85rem, 3vw, 1.25rem);
  }
  .stat-icon-gradient {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .stat-content-wrapper {
    max-width: calc(100% - 50px);
  }
  .dashboard-stat-card-gradient .card-body {
    padding: 1rem;
  }
}

/* Chart Icon Box */
.chart-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Customer Avatar Ring */
.customer-avatar-ring {
  padding: 3px;
  border-radius: 50%;
  display: inline-flex;
}

.customer-avatar-ring img {
  border: 2px solid #fff;
}

/* Colorful Quick Links */
.quick-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.quick-link-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quick-link-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.quick-link-card:hover .quick-link-icon {
  transform: scale(1.1);
}

.quick-link-card:hover .quick-link-text {
  color: #fff;
}

/* Quick Link Color Variations - Brand Palette */
.quick-link-purple {
  background: linear-gradient(135deg, rgba(157, 2, 8, 0.1) 0%, rgba(176, 3, 9, 0.1) 100%);
}

.quick-link-purple:hover {
  background: linear-gradient(135deg, #9d0208 0%, #b00309 100%);
}

.quick-link-purple .quick-link-icon {
  background: linear-gradient(135deg, #9d0208 0%, #b00309 100%);
  color: #fff;
}

.quick-link-blue {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.1) 0%, rgba(0, 150, 199, 0.1) 100%);
}

.quick-link-blue:hover {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
}

.quick-link-blue .quick-link-icon {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
  color: #fff;
}

.quick-link-green {
  background: linear-gradient(135deg, rgba(43, 147, 72, 0.1) 0%, rgba(64, 168, 90, 0.1) 100%);
}

.quick-link-green:hover {
  background: linear-gradient(135deg, #2b9348 0%, #40a85a 100%);
}

.quick-link-green .quick-link-icon {
  background: linear-gradient(135deg, #2b9348 0%, #40a85a 100%);
  color: #fff;
}

.quick-link-orange {
  background: linear-gradient(135deg, rgba(250, 163, 7, 0.1) 0%, rgba(251, 182, 39, 0.1) 100%);
}

.quick-link-orange:hover {
  background: linear-gradient(135deg, #faa307 0%, #fbb627 100%);
}

.quick-link-orange .quick-link-icon {
  background: linear-gradient(135deg, #faa307 0%, #fbb627 100%);
  color: #fff;
}

.quick-link-pink {
  background: linear-gradient(135deg, rgba(157, 2, 8, 0.1) 0%, rgba(250, 163, 7, 0.1) 100%);
}

.quick-link-pink:hover {
  background: linear-gradient(135deg, #9d0208 0%, #faa307 100%);
}

.quick-link-pink .quick-link-icon {
  background: linear-gradient(135deg, #9d0208 0%, #faa307 100%);
  color: #fff;
}

.quick-link-teal {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.1) 0%, rgba(43, 147, 72, 0.1) 100%);
}

.quick-link-teal:hover {
  background: linear-gradient(135deg, #0077b6 0%, #2b9348 100%);
}

.quick-link-teal .quick-link-icon {
  background: linear-gradient(135deg, #0077b6 0%, #2b9348 100%);
  color: #fff;
}

.quick-link-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  transition: transform 0.3s ease;
}

.quick-link-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #495057;
  transition: color 0.3s ease;
}

/* Gradient Classes for Progress Bars - Brand Palette */
.gradient-primary {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
}

.gradient-info {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
}

.gradient-success {
  background: linear-gradient(135deg, #2b9348 0%, #40a85a 100%);
}

.gradient-warning {
  background: linear-gradient(135deg, #faa307 0%, #fbb627 100%);
}

.gradient-danger {
  background: linear-gradient(135deg, #9d0208 0%, #b00309 100%);
}

/* Additional Gradient Classes (1-9) - Brand Palette */
.gradient-1 {
  background: linear-gradient(135deg, #9d0208 0%, #b00309 100%);
}

.gradient-2 {
  background: linear-gradient(135deg, #faa307 0%, #fbb627 100%);
}

.gradient-3 {
  background: linear-gradient(135deg, #2b9348 0%, #40a85a 100%);
}

.gradient-4 {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
}

.gradient-5 {
  background: linear-gradient(135deg, #9d0208 0%, #faa307 100%);
}

.gradient-7 {
  background: linear-gradient(135deg, #faa307 0%, #2b9348 100%);
}

.gradient-8 {
  background: linear-gradient(135deg, #2b9348 0%, #0077b6 100%);
}

.gradient-9 {
  background: linear-gradient(135deg, #0077b6 0%, #9d0208 100%);
}

/* Chart Container */
.chart-container {
  min-height: 250px;
}

/* Table Improvements */
.table-light {
  background-color: #f8f9fa !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 119, 182, 0.08) !important;
}

/* Size Utilities */
.hw-40 {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.hw-50 {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

/* Font Size Utilities */
.fs-8 {
  font-size: 0.75rem !important;
}

/* Subtle Background Colors - Brand Palette */
.bg-primary-subtle {
  background-color: rgba(0, 119, 182, 0.1) !important;
}

.bg-success-subtle {
  background-color: rgba(43, 147, 72, 0.1) !important;
}

.bg-info-subtle {
  background-color: rgba(0, 119, 182, 0.1) !important;
}

.bg-warning-subtle {
  background-color: rgba(250, 163, 7, 0.1) !important;
}

.bg-danger-subtle {
  background-color: rgba(157, 2, 8, 0.1) !important;
}

.bg-secondary-subtle {
  background-color: rgba(108, 117, 125, 0.1) !important;
}

/* Hover Opacity Utility */
.hover-opacity-100:hover {
  opacity: 1 !important;
}

/* Sidebar Colorful Menu Icons - Brand Palette (4 Distinct Colors) */
.sidebar-icon-crimson {
  color: #9d0208 !important;
}

.sidebar-icon-orange {
  color: #faa307 !important;
}

.sidebar-icon-green {
  color: #2b9348 !important;
}

.sidebar-icon-blue {
  color: #0077b6 !important;
}

/* Legacy class aliases */
.sidebar-icon-purple {
  color: #9d0208 !important;
}

.sidebar-icon-red {
  color: #9d0208 !important;
}

.sidebar-icon-pink {
  color: #faa307 !important;
}

.sidebar-icon-golden {
  color: #faa307 !important;
}

.sidebar-icon-teal {
  color: #0077b6 !important;
}

/* ================================================================ */
/* IMPROVED SIDEBAR - Modern SaaS-Grade Navigation                   */
/* ================================================================ */
/* Color Palette:
   - Ocean Blue: #0077b6 (Primary actions, Dashboard, Analytics)
   - Forest Green: #2b9348 (Success, Revenue, Growth features)
   - Golden Orange: #faa307 (Promotions, Marketing, Attention)
   - Crimson Red: #9d0208 (Important, Premium, Notifications)
*/

/* ==================== */
/* Base Icon Styling    */
/* ==================== */

/* Default icon color - soft gray for scannability */
.sidebar .navbar-nav .nav-item .nav-link i {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.25s ease;
  font-size: 1rem;
}

/* Colorful icons based on menu context - using CSS classes */
/* Dashboard & Analytics - Ocean Blue */
.sidebar .navbar-nav .nav-item .nav-link i.fa-house-user,
.sidebar .navbar-nav .nav-item .nav-link i.fa-chart-mixed,
.sidebar .navbar-nav .nav-item .nav-link i.fa-store,
.sidebar .navbar-nav .nav-item .nav-link i.fa-globe {
  color: #64b5f6 !important; /* Soft blue */
}

/* Orders & Sales - Forest Green */
.sidebar .navbar-nav .nav-item .nav-link i.fa-bag-shopping,
.sidebar .navbar-nav .nav-item .nav-link i.fa-cart-shopping,
.sidebar .navbar-nav .nav-item .nav-link i.fa-file-invoice-dollar,
.sidebar .navbar-nav .nav-item .nav-link i.fa-money-check-dollar-pen {
  color: #81c784 !important; /* Soft green */
}

/* Users & Customers - Ocean Blue */
.sidebar .navbar-nav .nav-item .nav-link i.fa-user-tie,
.sidebar .navbar-nav .nav-item .nav-link i.fa-users,
.sidebar .navbar-nav .nav-item .nav-link i.fa-headset {
  color: #4fc3f7 !important; /* Light blue */
}

/* Marketing & Promotions - Golden Orange */
.sidebar .navbar-nav .nav-item .nav-link i.fa-tags,
.sidebar .navbar-nav .nav-item .nav-link i.fa-envelope,
.sidebar .navbar-nav .nav-item .nav-link i.fa-comment-sms,
.sidebar .navbar-nav .nav-item .nav-link i.fa-share-nodes,
.sidebar .navbar-nav .nav-item .nav-link i.fa-bullhorn,
.sidebar .navbar-nav .nav-item .nav-link i.fa-bell,
.sidebar .navbar-nav .nav-item .nav-link i.fa-badge-percent {
  color: #ffb74d !important; /* Soft orange */
}

/* Products & Content - Crimson/Coral */
.sidebar .navbar-nav .nav-item .nav-link i.fa-file-lines,
.sidebar .navbar-nav .nav-item .nav-link i.fa-image,
.sidebar .navbar-nav .nav-item .nav-link i.fa-list-tree,
.sidebar .navbar-nav .nav-item .nav-link i.fa-images,
.sidebar .navbar-nav .nav-item .nav-link i.fa-blog {
  color: #ef9a9a !important; /* Soft coral */
}

/* Settings & System - Neutral Purple */
.sidebar .navbar-nav .nav-item .nav-link i.fa-gear,
.sidebar .navbar-nav .nav-item .nav-link i.fa-gears,
.sidebar .navbar-nav .nav-item .nav-link i.fa-language,
.sidebar .navbar-nav .nav-item .nav-link i.fa-link,
.sidebar .navbar-nav .nav-item .nav-link i.fa-rocket {
  color: #b39ddb !important; /* Soft purple */
}

/* Premium & Special - Rainbow gradient text */
.sidebar .navbar-nav .nav-item .nav-link i.fa-medal,
.sidebar .navbar-nav .nav-item .nav-link i.fa-magnifying-glass-dollar {
  color: #ffd54f !important; /* Gold */
}

/* Social integrations - Brand colors (soft) */
.sidebar .navbar-nav .nav-item .nav-link i.fa-whatsapp {
  color: #69f0ae !important; /* WhatsApp green */
}
.sidebar .navbar-nav .nav-item .nav-link i.fa-telegram {
  color: #4fc3f7 !important; /* Telegram blue */
}
.sidebar .navbar-nav .nav-item .nav-link i.fa-shopify {
  color: #81c784 !important; /* Shopify green */
}

/* Active state - icon becomes white for contrast */
.sidebar .navbar-nav .nav-item .nav-link.active i {
  color: var(--bs-primary) !important;
}

/* Hover state - icon brightens */
.sidebar .navbar-nav .nav-item .nav-link:hover i {
  color: var(--bs-primary) !important;
  transform: scale(1.1);
}

/* ========================= */
/* Section Headers Styling   */
/* ========================= */

.sidebar .navbar-nav h6.text-uppercase {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 1px;
  position: relative;
  padding: 0.5rem 0.75rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Section header left accent bar */
.sidebar .navbar-nav h6.text-uppercase::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 2px 2px 0;
}

/* Section header icons (pseudo-element) */
.sidebar .navbar-nav h6.text-uppercase::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.6;
}

/* Orders Management - Ocean Blue */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(1) {
  color: #64b5f6 !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(1)::before {
  background: linear-gradient(180deg, #0077b6, #64b5f6);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(1)::after {
  background: #64b5f6;
}

/* User Management - Forest Green */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(2) {
  color: #81c784 !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(2)::before {
  background: linear-gradient(180deg, #2b9348, #81c784);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(2)::after {
  background: #81c784;
}

/* Promotions - Golden Orange */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(3) {
  color: #ffb74d !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(3)::before {
  background: linear-gradient(180deg, #faa307, #ffb74d);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(3)::after {
  background: #ffb74d;
}

/* Product Management - Coral Red */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(4) {
  color: #ef9a9a !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(4)::before {
  background: linear-gradient(180deg, #9d0208, #ef9a9a);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(4)::after {
  background: #ef9a9a;
}

/* Business Management - Ocean Blue */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(5) {
  color: #4fc3f7 !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(5)::before {
  background: linear-gradient(180deg, #0077b6, #4fc3f7);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(5)::after {
  background: #4fc3f7;
}

/* Website Settings - Forest Green */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(6) {
  color: #a5d6a7 !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(6)::before {
  background: linear-gradient(180deg, #2b9348, #a5d6a7);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(6)::after {
  background: #a5d6a7;
}

/* Employee Management - Purple */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(7) {
  color: #b39ddb !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(7)::before {
  background: linear-gradient(180deg, #7e57c2, #b39ddb);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(7)::after {
  background: #b39ddb;
}

/* Landing Page - Golden */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(8) {
  color: #ffd54f !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(8)::before {
  background: linear-gradient(180deg, #faa307, #ffd54f);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(8)::after {
  background: #ffd54f;
}

/* Other - Soft Blue */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(9) {
  color: #90caf9 !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(9)::before {
  background: linear-gradient(180deg, #0077b6, #90caf9);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(9)::after {
  background: #90caf9;
}

/* Additional sections */
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(10) {
  color: #c5e1a5 !important;
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(10)::before {
  background: linear-gradient(180deg, #2b9348, #c5e1a5);
}
.sidebar .navbar-nav h6.text-uppercase:nth-of-type(10)::after {
  background: #c5e1a5;
}

/* ========================= */
/* Enhanced Nav Link States  */
/* ========================= */

/* Base nav link improvements */
.sidebar .navbar-nav .nav-item .nav-link {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.75rem;
  margin-bottom: 2px;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
  border-left: 3px solid transparent;
}

/* Hover state - subtle lift effect */
.sidebar .navbar-nav .nav-item .nav-link:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--bs-primary) !important;
  transform: translateX(3px);
  border-left-color: var(--bs-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Active state - prominent highlight */
.sidebar .navbar-nav .nav-item .nav-link.active {
  background: rgba(255, 255, 255, 1) !important;
  color: var(--bs-primary) !important;
  border-left-color: var(--bs-primary);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Focus state for accessibility */
.sidebar .navbar-nav .nav-item .nav-link:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Focus-visible for keyboard navigation */
.sidebar .navbar-nav .nav-item .nav-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ========================= */
/* Dropdown/Submenu Styling  */
/* ========================= */

/* Dropdown toggle chevron */
.sidebar .navbar-nav .nav-item .nav-link.dropdown-toggle::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.65rem;
  margin-left: auto;
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.sidebar .navbar-nav .nav-item .nav-link.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Submenu items */
.sidebar .navbar-nav .nav-item ul.collapse {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin: 0.25rem 0;
  padding: 0.25rem 0;
}

.sidebar .navbar-nav .nav-item ul.collapse li a {
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  font-size: 0.85rem;
  opacity: 0.9;
  transition: all 0.2s ease;
}

.sidebar .navbar-nav .nav-item ul.collapse li a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1) !important;
  padding-left: 2.25rem;
}

.sidebar .navbar-nav .nav-item ul.collapse li a.active {
  background: rgba(255, 255, 255, 0.2) !important;
  font-weight: 600;
}

/* Submenu indicator dots */
.sidebar .navbar-nav .nav-item .multimenu-menu-indicator i {
  font-size: 0.4rem;
  margin-right: 0.5rem;
  opacity: 0.6;
}

/* ========================= */
/* Badge Styling             */
/* ========================= */

/* Addon badge */
.sidebar .navbar-nav .nav-item .badge.bg-danger {
  background: linear-gradient(135deg, #9d0208, #ef5350) !important;
  font-size: 0.6rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(157, 2, 8, 0.3);
}

/* Premium badge styling */
.sidebar .navbar-nav .nav-item .rainbowText {
  font-size: 0.6rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================= */
/* Growth Feature Highlights */
/* ========================= */

/* Highlight growth/monetization features with subtle glow */
.sidebar .navbar-nav .nav-item .nav-link[href*="marketplace"],
.sidebar .navbar-nav .nav-item .nav-link[href*="addon"],
.sidebar .navbar-nav .nav-item .nav-link[href*="referral"],
.sidebar .navbar-nav .nav-item .nav-link[href*="email-marketing"],
.sidebar .navbar-nav .nav-item .nav-link[href*="sms-marketing"] {
  position: relative;
}

.sidebar .navbar-nav .nav-item .nav-link[href*="marketplace"]::before,
.sidebar .navbar-nav .nav-item .nav-link[href*="addon-store"]::before {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #81c784;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.5; transform: translateY(-50%) scale(1.2); }
}

/* ========================= */
/* Scrollbar Customization   */
/* ========================= */

.sidebar .navbar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar .navbar-nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.sidebar .navbar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.sidebar .navbar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* ========================= */
/* Mobile Responsiveness     */
/* ========================= */

@media (max-width: 991.98px) {
  .sidebar .navbar-nav h6.text-uppercase {
    font-size: 0.6rem;
    padding: 0.4rem 0.5rem;
  }

  .sidebar .navbar-nav .nav-item .nav-link {
    padding: 0.5rem 0.6rem;
    font-size: 0.875rem;
  }

  .sidebar .navbar-nav .nav-item .nav-link i {
    font-size: 0.9rem;
  }
}

/* Touch-friendly spacing on mobile */
@media (hover: none) {
  .sidebar .navbar-nav .nav-item .nav-link {
    padding: 0.75rem;
  }

  .sidebar .navbar-nav .nav-item .nav-link:hover {
    transform: none;
  }
}

/* ========= End Dashboard Improvements ========= */

.rainbowText {
  font-family: arial black;
  font-size: 12px;
  background-image:
    linear-gradient(to right, red, orange, rgb(255, 234, 0), green, rgb(0, 0, 255), rgb(149, 0, 255), violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: move 1000s linear infinite;
}

@keyframes move {
  to {
    background-position: 4500vh;
  }
}

::-webkit-scrollbar {
  width: 2px !important;
  height: 2px;
}

::-webkit-scrollbar-track {
  background: #d2d2d2;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--bs-secondary);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary);
}

.btn.disabled {
  opacity: 1 !important;
}

/* ==================== extra class using dropdown start ==================== */
.add-extra-class .bootstrap-select .dropdown-toggle .filter-option {
  position: static;
  top: 0;
  left: 0;
  float: left;
  height: 100%;
  width: 100%;
  text-align: left;
  display: flex !important;
  overflow: hidden;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.add-extra-class .dropdown-item {
  display: flex !important;
}

.add-extra-class .bootstrap-select.show-tick .dropdown-menu li a span.text {
  margin-right: 0px !important;
}


.add-extra-class.rtl .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  position: absolute;
  display: inline-block;
  left: 15px !important;
  right: unset !important;
  top: 5px;
}

.add-extra-class .bootstrap-select .dropdown-menu {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ==================== extra class using dropdown end ==================== */

.extra-padding {
  padding: 13px 26px !important;
}

/* ================ New Pos Dhruvil Desai start=================== */

.logo-size {
  height: 50px;
}

.product-text-size {
  font-size: .75rem !important;
}

.sidebares {
  position: fixed;
  z-index: 100;
  padding: 30px 0;
  border-right: 1px solid var(--bs-secondary);
  background-color: var(--bg-white);
  overflow: auto;
  /* display: flex; */
  width: auto;
  transition: all 0.3s;
  padding: 20px;
}

.sidebares .nav-item {
  display: inline-block;
}

.catagory-size {
  width: 45px;
  height: 45px;
}

.sidebr-box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 1px solid #c9c9c9;
  transition: all .3s ease-in-out;
  padding: 5px;
  color: var(--text-secondary);
}

.main-product {
  margin-left: 150px;
}

.underline {
  border-bottom: 1px solid var(--bs-secondary);
}

::-webkit-scrollbar {
  width: 2px !important;
  height: 2px;
}

::-webkit-scrollbar-track {
  background: #d2d2d2;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--bs-secondary);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary);
}

.actives {
  /* box-shadow: 1px 1px 15px 1px rgb(144, 144, 144); */
  border-radius: 10px;
  border: 1px solid var(--bs-secondary);
  transition: all .3s ease-in-out;
  background-color: var(--bs-secondary-rgb);
  color: var(--bs-secondary) !important;
}

.product-name {
  font-size: calc(14px + (18 - 13) * ((100vw - 320px) / (1920 - 320))) !important;
}

.font-8px {
  font-size: 8px;
}

.offer-box {
  width: 55px;
  top: 10px;
  display: flex;
  justify-content: center;
  left: 10px;
  padding: 3px;
  border-radius: 12px;
  font-size: 11px !important;
  border: 1px solid #000;
  font-weight: 600 !important;
  background-color: var(--bs-secondary);
  color: var(--bs-primary) !important;
}

.offer-box h6 {
  line-height: 1;
}

.cart-btn {
  bottom: 20px;
  width: 70px;
  height: 70px;
  border: none;
  background-color: var(--bs-secondary);
  animation: mymove 2s infinite;
}

.cart-btn-right {
  left: 10px;
}

.cart-btn-left {
  right: 10px;
}

@keyframes mymove {
  50% {
    box-shadow: 0px 0px 10px 5px #00000052;
  }

}

.cart-count {
  position: absolute;
  top: -13px;
  width: 30px;
  height: 30px;
  right: 0px;
}

.price-total {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.closing-button-1 {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid var(--bs-secondary);
}

.closing-button-1-left {
  right: 100%;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.closing-button-1-right {
  left: 100%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.imgs {
  max-height: 300px;
  height: 300px;
}

.qty-container .qty-btn-minus {
  margin-right: -1px;
}

.qty-container .qty-btn-minus,
.qty-container .qty-btn-plus {
  border: 1px solid #d4d4d4;
  font-size: 10px;
  height: 18px;
  margin: 0px 0px;
  width: 18px;
  border-radius: 50%;
  transition: 0.3s;
}

.button-modal {
  width: 100%;
  padding: 12px 0.75rem;
  font-size: 16px;
  border-radius: 0.375rem;
  background-color: var(--bs-primary);
}

.qty-container .input-qty {
  text-align: center;
  max-height: 50px;
  background-color: transparent;
  border: none;
  max-width: 30px;
}

.text-sm {
  font-size: .790rem;
}

.underline-2 {
  border-top: 2px dotted #808080;
  border-bottom: 2px dotted #808080;
}

.offcanvas {
  background-color: var(--bs-white) !important;
}

.total-pay {
  width: 100%;
  padding: 10px;
}

.bg-primary {
  background-color: #000 !important;
}

.box-product-2 {
  width: 100%;
  height: 300px !important;
  overflow-y: scroll;
}

.notes-box {
  border: 2px dotted var(--bg-date);
}

.modal-price {
  font-size: 13px !important;
}

.from-name {
  font-size: 13px !important;
}

.customer::placeholder {
  font-size: 13px !important;
}

.closing-button-2 {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.total-pay1 {
  padding: 10px;
}

.thanks-order-btn {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

.modal-img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
}

.font-8px {
  font-size: 10px;
}

.sidebares-right {
  right: 0;
}

.sidebares-left {
  left: 0;
}

.btn-fashion {
  padding: clamp(0.625rem, 0.5673rem + 0.2564vw, 0rem) clamp(1.25rem, 0.9904rem + 1.1538vw, 0rem);
  border-radius: 0px;
  background-color: var(--bs-secondary) !important;
  color: #fff !important;
  border: 1px solid var(--bs-secondary);
}


.product-variations-wrapper .active {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary);
  color: #fff !important;
}

.size-variation .checkbox-inline {
  padding: 6px 15px;
  border: 1px solid var(--bs-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bs-primary);
  border-radius: 6px;
}

.checkbox-inline input {
  display: none;
}

/* Loader Start */
.loader {
  width: 20px;
  height: 20px;
  border: 2px solid var(--bs-primary);
  border-bottom-color: transparent;
  border-radius: 10px;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Loader End */

/* Qty btn Start */
.qty-input2 {
  border: 1px solid var(--bs-primary);
  flex-wrap: nowrap;
  padding: 7px;
}

.qty-input2 .change-qty-1 {
  margin: 0;
  font-size: 10px;
  height: 38px;
  width: 47px;
  font-weight: 500;
  color: #fff !important;
  border: 0;
  background: var(--bs-primary);
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-input2 input {
  border-radius: 0% !important;
  font-size: 16px;
  padding: 0;
  margin: 0;
  color: #121212;
  line-height: 20px;
  border: 0 !important;
  width: 56.4% !important;
  margin: 0px 5px !important;
}

.qty-input2 .change-qty-1:active {
  background: var(--bs-primary) !important;
}

/* Qty btn End */

/* Product Extra Start */
/* .extra-food li {
  position: relative;
  margin-bottom: 8px !important;
}

.extra-food li input {
  position: absolute;
  top: 1px;
  left: 0;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin-bottom: 0;
}

.extra-food li p::before {
  content: "";
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  position: absolute;
  border-radius: 5px;
  border: 1px solid var(--bs-secondary);
}

.extra-food li input:checked+p::after {
  opacity: 1;
}

.extra-food li p::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 12px;
  height: 12px;
  opacity: 0;
  border-radius: 3px;
  transition: all 0.5s;
  background-color: var(--bs-primary);
}

.extra-food li p {
  padding-left: 30px;
  font-size: 15px;
} */

/* Product Extra End */

.category-name {
  font-size: 22px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.fiex-width {
  width: 40px;
  display: flex;
  justify-content: center;
}

.lag-btn .dropdown-menu {
  --bs-dropdown-min-width: 8rem !important;
  padding: 0px 0px !important;
  overflow: hidden !important;
  font-size: 12px !important;
}

.w-5 {
  width: 5rem !important;
}

/* ========= Advanced Analytics Container Styles - Brand Color Palette ========= */
/* Brand Colors: #9d0208 (crimson), #faa307 (golden orange), #2b9348 (forest green), #0077b6 (ocean blue) */

/* Analytics Page Header */
.analytics-header {
  background: linear-gradient(135deg, #9d0208 0%, #0077b6 100%);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 40px rgba(157, 2, 8, 0.2);
}

.analytics-header h5,
.analytics-header .text-uppercase {
  color: #fff !important;
}

.analytics-header .badge {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
}

.analytics-header .form-select,
.analytics-header .form-control {
  background: rgba(255, 255, 255, 0.95);
  border: none;
}

.analytics-header .btn-outline-secondary {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: #333;
}

.analytics-header .btn-outline-secondary:hover {
  background: #fff;
}

/* Analytics Navigation Tabs */
.analytics-tabs {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.05) 0%, rgba(43, 147, 72, 0.05) 100%);
  border-radius: 12px;
  padding: 0.5rem;
  margin-bottom: 1.5rem;
  border: none;
}

.analytics-tabs .nav-link {
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: #495057;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none !important;
}

.analytics-tabs .nav-link:hover {
  background: rgba(0, 119, 182, 0.1);
  color: #0077b6;
}

.analytics-tabs .nav-link.active {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(0, 119, 182, 0.3);
  border: none !important;
}

/* Analytics Metric Cards - Gradient Backgrounds */
.analytics-metric-card {
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.analytics-metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Metric Card Variants - 4 Color Palette */
.analytics-metric-crimson {
  background: linear-gradient(135deg, #9d0208 0%, #b00309 100%) !important;
  box-shadow: 0 10px 30px rgba(157, 2, 8, 0.25);
}

.analytics-metric-crimson .card-body * {
  color: #fff !important;
}

.analytics-metric-crimson .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.analytics-metric-crimson .text-success,
.analytics-metric-crimson .text-danger {
  color: rgba(255, 255, 255, 0.9) !important;
}

.analytics-metric-orange {
  background: linear-gradient(135deg, #faa307 0%, #fbb627 100%) !important;
  box-shadow: 0 10px 30px rgba(250, 163, 7, 0.25);
}

.analytics-metric-orange .card-body * {
  color: #fff !important;
}

.analytics-metric-orange .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.analytics-metric-orange .text-success,
.analytics-metric-orange .text-danger {
  color: rgba(255, 255, 255, 0.9) !important;
}

.analytics-metric-green {
  background: linear-gradient(135deg, #2b9348 0%, #40a85a 100%) !important;
  box-shadow: 0 10px 30px rgba(43, 147, 72, 0.25);
}

.analytics-metric-green .card-body * {
  color: #fff !important;
}

.analytics-metric-green .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.analytics-metric-green .text-success,
.analytics-metric-green .text-danger {
  color: rgba(255, 255, 255, 0.9) !important;
}

.analytics-metric-blue {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%) !important;
  box-shadow: 0 10px 30px rgba(0, 119, 182, 0.25);
}

.analytics-metric-blue .card-body * {
  color: #fff !important;
}

.analytics-metric-blue .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.analytics-metric-blue .text-success,
.analytics-metric-blue .text-danger {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Analytics Chart Cards - Subtle Gradient Backgrounds */
.analytics-chart-card {
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: all 0.3s ease;
}

.analytics-chart-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Chart Card Variants with Subtle Colored Backgrounds */
.analytics-chart-crimson {
  background: linear-gradient(135deg, rgba(157, 2, 8, 0.03) 0%, rgba(176, 3, 9, 0.06) 100%) !important;
  border-left: 4px solid #9d0208 !important;
}

.analytics-chart-crimson .card-title {
  color: #9d0208;
}

.analytics-chart-orange {
  background: linear-gradient(135deg, rgba(250, 163, 7, 0.03) 0%, rgba(251, 182, 39, 0.06) 100%) !important;
  border-left: 4px solid #faa307 !important;
}

.analytics-chart-orange .card-title {
  color: #b07a00;
}

.analytics-chart-green {
  background: linear-gradient(135deg, rgba(43, 147, 72, 0.03) 0%, rgba(64, 168, 90, 0.06) 100%) !important;
  border-left: 4px solid #2b9348 !important;
}

.analytics-chart-green .card-title {
  color: #2b9348;
}

.analytics-chart-blue {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.03) 0%, rgba(0, 150, 199, 0.06) 100%) !important;
  border-left: 4px solid #0077b6 !important;
}

.analytics-chart-blue .card-title {
  color: #0077b6;
}

/* Mixed Gradient Chart Cards */
.analytics-chart-mixed-1 {
  background: linear-gradient(135deg, rgba(157, 2, 8, 0.03) 0%, rgba(0, 119, 182, 0.06) 100%) !important;
  border-left: 4px solid #9d0208 !important;
  border-right: 4px solid #0077b6 !important;
}

.analytics-chart-mixed-2 {
  background: linear-gradient(135deg, rgba(250, 163, 7, 0.03) 0%, rgba(43, 147, 72, 0.06) 100%) !important;
  border-left: 4px solid #faa307 !important;
  border-right: 4px solid #2b9348 !important;
}

/* Analytics Insight Cards */
.analytics-insight-card {
  background: linear-gradient(135deg, rgba(250, 163, 7, 0.05) 0%, rgba(157, 2, 8, 0.05) 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  border-left: 4px solid #faa307 !important;
}

.analytics-insight-card .card-title i {
  color: #faa307;
}

/* Analytics Data Table Cards */
.analytics-table-card {
  background: linear-gradient(135deg, #fff 0%, rgba(0, 119, 182, 0.02) 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  border-bottom: 4px solid #0077b6 !important;
}

/* Analytics Summary Section */
.analytics-summary {
  background: linear-gradient(135deg, rgba(43, 147, 72, 0.05) 0%, rgba(0, 119, 182, 0.05) 100%);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Realtime Indicator Enhancement */
.analytics-realtime {
  background: linear-gradient(135deg, #2b9348 0%, #40a85a 100%);
  border-radius: 20px;
  padding: 0.35rem 0.75rem;
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 147, 72, 0.4); }
  50% { box-shadow: 0 0 15px 5px rgba(43, 147, 72, 0.2); }
}

/* Analytics Icon Boxes */
.analytics-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.analytics-icon-crimson {
  background: linear-gradient(135deg, rgba(157, 2, 8, 0.15) 0%, rgba(176, 3, 9, 0.15) 100%);
  color: #9d0208;
}

.analytics-icon-orange {
  background: linear-gradient(135deg, rgba(250, 163, 7, 0.15) 0%, rgba(251, 182, 39, 0.15) 100%);
  color: #faa307;
}

.analytics-icon-green {
  background: linear-gradient(135deg, rgba(43, 147, 72, 0.15) 0%, rgba(64, 168, 90, 0.15) 100%);
  color: #2b9348;
}

.analytics-icon-blue {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.15) 0%, rgba(0, 150, 199, 0.15) 100%);
  color: #0077b6;
}

/* Analytics Trend Indicators */
.analytics-trend-up {
  background: rgba(43, 147, 72, 0.1);
  color: #2b9348;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
}

.analytics-trend-down {
  background: rgba(157, 2, 8, 0.1);
  color: #9d0208;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
}

/* ============================================
   MARKETPLACE CONTAINER STYLES - 4 Color Palette
   #9d0208 - Crimson Red
   #faa307 - Golden Orange
   #2b9348 - Forest Green
   #0077b6 - Ocean Blue
   ============================================ */

/* Marketplace Page Header */
.marketplace-header {
  background: linear-gradient(135deg, #9d0208 0%, #0077b6 100%);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 40px rgba(157, 2, 8, 0.2);
  color: #fff;
}

.marketplace-header h5 {
  color: #fff;
  margin-bottom: 0.25rem;
}

.marketplace-header p {
  color: rgba(255, 255, 255, 0.8);
}

.marketplace-header .btn-outline-primary {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.marketplace-header .btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

.marketplace-header .btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
  color: #fff;
}

.marketplace-header .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Marketplace Category Cards */
.marketplace-category-card {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.05) 0%, rgba(43, 147, 72, 0.05) 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  transition: all 0.3s ease;
}

.marketplace-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 119, 182, 0.15) !important;
}

.marketplace-category-crimson {
  background: linear-gradient(135deg, rgba(157, 2, 8, 0.08) 0%, rgba(157, 2, 8, 0.03) 100%) !important;
  border-left: 3px solid #9d0208 !important;
}

.marketplace-category-orange {
  background: linear-gradient(135deg, rgba(250, 163, 7, 0.08) 0%, rgba(250, 163, 7, 0.03) 100%) !important;
  border-left: 3px solid #faa307 !important;
}

.marketplace-category-green {
  background: linear-gradient(135deg, rgba(43, 147, 72, 0.08) 0%, rgba(43, 147, 72, 0.03) 100%) !important;
  border-left: 3px solid #2b9348 !important;
}

.marketplace-category-blue {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.08) 0%, rgba(0, 119, 182, 0.03) 100%) !important;
  border-left: 3px solid #0077b6 !important;
}

/* Marketplace Section Headers */
.marketplace-section-header {
  background: linear-gradient(90deg, rgba(157, 2, 8, 0.05) 0%, transparent 100%);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border-left: 4px solid #9d0208;
  margin-bottom: 1rem;
}

.marketplace-section-header.featured {
  background: linear-gradient(90deg, rgba(250, 163, 7, 0.08) 0%, transparent 100%);
  border-left-color: #faa307;
}

.marketplace-section-header.popular {
  background: linear-gradient(90deg, rgba(43, 147, 72, 0.08) 0%, transparent 100%);
  border-left-color: #2b9348;
}

.marketplace-section-header.new {
  background: linear-gradient(90deg, rgba(0, 119, 182, 0.08) 0%, transparent 100%);
  border-left-color: #0077b6;
}

/* Marketplace Addon Cards */
.marketplace-addon-card {
  background: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.marketplace-addon-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #9d0208, #faa307, #2b9348, #0077b6);
}

.marketplace-addon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
}

.marketplace-addon-card.purchased::before {
  background: linear-gradient(90deg, #2b9348, #40a85a);
}

.marketplace-addon-card.trial::before {
  background: linear-gradient(90deg, #0077b6, #0096c7);
}

.marketplace-addon-card.expired::before {
  background: linear-gradient(90deg, #faa307, #fbb627);
}

/* Marketplace Filter Sidebar */
.marketplace-filter-card {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.03) 0%, rgba(43, 147, 72, 0.03) 100%) !important;
  border: none !important;
  border-radius: 12px !important;
}

.marketplace-filter-card .list-group-item.active {
  background: linear-gradient(90deg, #0077b6, #0096c7) !important;
  border-color: transparent !important;
}

/* Marketplace Installed Addon Container */
.marketplace-installed-card {
  background: linear-gradient(135deg, rgba(43, 147, 72, 0.05) 0%, rgba(43, 147, 72, 0.02) 100%) !important;
  border: none !important;
  border-left: 4px solid #2b9348 !important;
  border-radius: 12px !important;
}

/* Marketplace Addon Detail Page */
.marketplace-detail-header {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.05) 0%, rgba(157, 2, 8, 0.03) 100%) !important;
  border: none !important;
  border-radius: 12px !important;
}

.marketplace-detail-section {
  background: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
}

.marketplace-detail-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #9d0208, #0077b6);
}

/* Marketplace Pricing Card */
.marketplace-pricing-card {
  background: linear-gradient(135deg, rgba(157, 2, 8, 0.03) 0%, rgba(250, 163, 7, 0.03) 100%) !important;
  border: 2px solid rgba(157, 2, 8, 0.1) !important;
  border-radius: 16px !important;
}

.marketplace-pricing-card .text-primary {
  color: #9d0208 !important;
}

.marketplace-pricing-card .text-success {
  color: #2b9348 !important;
}

/* Marketplace Status Badges */
.marketplace-badge-active {
  background: linear-gradient(90deg, #2b9348, #40a85a) !important;
  color: #fff !important;
}

.marketplace-badge-trial {
  background: linear-gradient(90deg, #0077b6, #0096c7) !important;
  color: #fff !important;
}

.marketplace-badge-expired {
  background: linear-gradient(90deg, #faa307, #fbb627) !important;
  color: #fff !important;
}

.marketplace-badge-cancelled {
  background: linear-gradient(90deg, #9d0208, #b00309) !important;
  color: #fff !important;
}

/* Marketplace My Addons Cards */
.marketplace-my-addon-card {
  background: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
}

.marketplace-my-addon-card.active {
  border-left: 4px solid #2b9348 !important;
}

.marketplace-my-addon-card.trial {
  border-left: 4px solid #0077b6 !important;
}

.marketplace-my-addon-card.expired {
  border-left: 4px solid #faa307 !important;
}

.marketplace-my-addon-card.cancelled {
  border-left: 4px solid #9d0208 !important;
}

/* Marketplace Checkout */
.marketplace-checkout-card {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.03) 0%, rgba(43, 147, 72, 0.03) 100%) !important;
  border: none !important;
  border-radius: 16px !important;
}

.marketplace-checkout-card .order-summary {
  background: rgba(157, 2, 8, 0.03);
  border: 1px solid rgba(157, 2, 8, 0.1);
  border-radius: 12px;
}

.marketplace-checkout-card .payment-method {
  transition: all 0.2s ease;
}

.marketplace-checkout-card .payment-method:hover {
  border-color: #0077b6 !important;
  background: rgba(0, 119, 182, 0.05);
}

.marketplace-checkout-card .payment-method.selected {
  border-color: #0077b6 !important;
  background: rgba(0, 119, 182, 0.08) !important;
}

/* Marketplace Manage Page */
.marketplace-manage-header {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.05) 0%, rgba(43, 147, 72, 0.03) 100%) !important;
  border: none !important;
  border-radius: 12px !important;
}

.marketplace-manage-section {
  background: #fff !important;
  border: none !important;
  border-radius: 12px !important;
}

.marketplace-manage-section.subscription {
  border-left: 4px solid #0077b6 !important;
}

.marketplace-manage-section.settings {
  border-left: 4px solid #2b9348 !important;
}

.marketplace-manage-section.payments {
  border-left: 4px solid #faa307 !important;
}

.marketplace-manage-actions {
  background: linear-gradient(135deg, rgba(43, 147, 72, 0.05) 0%, rgba(43, 147, 72, 0.02) 100%) !important;
  border: none !important;
  border-radius: 12px !important;
}

.marketplace-danger-zone {
  background: linear-gradient(135deg, rgba(157, 2, 8, 0.05) 0%, rgba(157, 2, 8, 0.02) 100%) !important;
  border: 1px solid rgba(157, 2, 8, 0.2) !important;
  border-radius: 12px !important;
}

/* Marketplace Related Addons */
.marketplace-related-card {
  background: linear-gradient(135deg, rgba(250, 163, 7, 0.05) 0%, rgba(250, 163, 7, 0.02) 100%) !important;
  border: none !important;
  border-radius: 12px !important;
}

/* Marketplace Reviews */
.marketplace-reviews-card {
  background: #fff !important;
  border: none !important;
  border-left: 4px solid #faa307 !important;
  border-radius: 12px !important;
}

/* Marketplace Icon Boxes */
.marketplace-icon-crimson {
  background: rgba(157, 2, 8, 0.1);
  color: #9d0208;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marketplace-icon-orange {
  background: rgba(250, 163, 7, 0.1);
  color: #faa307;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marketplace-icon-green {
  background: rgba(43, 147, 72, 0.1);
  color: #2b9348;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marketplace-icon-blue {
  background: rgba(0, 119, 182, 0.1);
  color: #0077b6;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   PRICING PLAN CARDS - Modern Cyan Palette
   Primary: #00b4d8, Secondary: #0077b6, #0096c7
   Accents: #48cae4, #90e0ef, #caf0f8
   ============================================ */

/* Pricing Plan Card Container */
.pricing-plan-card {
  position: relative;
  border-radius: 20px !important;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 180, 216, 0.15) !important;
  background: #fff;
}

.pricing-plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0077b6, #00b4d8, #48cae4, #90e0ef);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 180, 216, 0.2) !important;
  border-color: rgba(0, 180, 216, 0.3) !important;
}

.pricing-plan-card:hover::before {
  opacity: 1;
}

.pricing-plan-card.plan-card-active {
  border: 2px solid #00b4d8 !important;
  box-shadow: 0 12px 35px rgba(0, 180, 216, 0.25) !important;
}

.pricing-plan-card.plan-card-active::before {
  height: 5px;
  background: linear-gradient(90deg, #0077b6, #00b4d8, #48cae4);
  opacity: 1;
}

/* Pricing Plan Header */
.pricing-plan-header {
  background: linear-gradient(135deg, #0077b6 0%, #00b4d8 50%, #48cae4 100%) !important;
  border: none !important;
  padding: 1.25rem 1.5rem !important;
  position: relative;
  overflow: hidden;
}

.pricing-plan-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 100px;
  height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.pricing-plan-header h5 {
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Billing Toggle Styles */
.pricing-billing-toggle {
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.08) 0%, rgba(72, 202, 228, 0.05) 100%);
  border-radius: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(0, 180, 216, 0.15);
}

.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.toggle-label.active {
  color: #00b4d8;
  font-weight: 600;
}

.toggle-label.monthly-label.active {
  color: #0077b6;
}

.toggle-label.yearly-label.active {
  color: #0096c7;
}

.yearly-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.savings-badge {
  background: linear-gradient(135deg, #00b4d8, #48cae4);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 180, 216, 0.3);
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0, 180, 216, 0.3); }
  50% { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 180, 216, 0.4); }
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 28px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 180, 216, 0.2);
}

.toggle-slider::before {
  position: absolute;
  content: '';
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #0096c7, #48cae4);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(24px);
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.25);
}

.toggle-switch input:checked:focus + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(72, 202, 228, 0.25);
}

/* Pricing Display */
.pricing-display {
  position: relative;
}

.pricing-display .price-amount {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.pricing-display.yearly .price-amount {
  background: linear-gradient(135deg, #0096c7, #48cae4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-display .price-period {
  transition: all 0.3s ease;
}

.yearly-savings-info {
  margin-top: 6px;
  animation: fadeIn 0.3s ease;
}

.yearly-savings-info small {
  color: #0096c7 !important;
}

.monthly-equivalent-info {
  margin-top: 4px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Features List */
.pricing-features-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.pricing-features-list li {
  padding: 6px 0;
  transition: all 0.2s ease;
}

.pricing-features-list li:hover {
  transform: translateX(4px);
}

.pricing-feature-icon {
  color: #00b4d8;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Subscribe Button */
.pricing-subscribe-btn {
  background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
}

.pricing-subscribe-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s ease;
}

.pricing-subscribe-btn:hover::before {
  left: 100%;
}

.pricing-subscribe-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 180, 216, 0.4) !important;
}

.pricing-subscribe-btn.yearly-active {
  background: linear-gradient(135deg, #0096c7 0%, #48cae4 100%) !important;
}

.pricing-subscribe-btn.yearly-active:hover {
  box-shadow: 0 8px 25px rgba(72, 202, 228, 0.4) !important;
}

/* Pricing Card Variants by Index - All Cyan Shades */
.pricing-plan-card:nth-child(4n+1) .pricing-plan-header {
  background: linear-gradient(135deg, #03045e 0%, #0077b6 100%) !important;
}

.pricing-plan-card:nth-child(4n+2) .pricing-plan-header {
  background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%) !important;
}

.pricing-plan-card:nth-child(4n+3) .pricing-plan-header {
  background: linear-gradient(135deg, #0096c7 0%, #48cae4 100%) !important;
}

.pricing-plan-card:nth-child(4n+4) .pricing-plan-header {
  background: linear-gradient(135deg, #00b4d8 0%, #90e0ef 100%) !important;
}

/* Featured/Popular Badge */
.pricing-plan-card.featured::after {
  content: 'Popular';
  position: absolute;
  top: 15px;
  right: -35px;
  background: linear-gradient(135deg, #00b4d8, #48cae4);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 40px;
  transform: rotate(45deg);
  box-shadow: 0 2px 10px rgba(0, 180, 216, 0.4);
  z-index: 10;
}

/* Active Plan Indicator */
.pricing-plan-card.plan-card-active::after {
  content: 'Current Plan';
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #00b4d8, #48cae4);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 180, 216, 0.3);
}

/* Accessibility - Focus States */
.billing-toggle:focus-visible + .toggle-slider {
  outline: 2px solid #00b4d8;
  outline-offset: 2px;
}

.toggle-label:focus-visible {
  outline: 2px solid #00b4d8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .toggle-container {
    flex-wrap: wrap;
    gap: 8px;
  }

  .toggle-label {
    font-size: 12px;
  }

  .savings-badge {
    font-size: 9px;
    padding: 2px 6px;
  }

  .pricing-display .price-amount {
    font-size: 1.5rem;
  }

  .pricing-plan-card {
    border-radius: 16px !important;
  }
}

/* Animation for price change */
.price-amount.changing {
  animation: priceChange 0.3s ease;
}

@keyframes priceChange {
  0% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* ========================================
   MODERN DASHBOARD COMPONENT STYLES
   Blue Color Palette Enhancement
   ======================================== */

/* Modern Card Styles */
.card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
}

.card-header {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.04), rgba(0, 180, 216, 0.02));
  border-bottom: 1px solid rgba(0, 119, 182, 0.1);
  padding: 16px 20px;
  font-weight: 600;
  color: #03045e;
}

.card-body {
  padding: 20px;
}

.card-title {
  color: #03045e !important;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* Modern Table Styles */
.table {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

.table thead tr {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.06), rgba(0, 180, 216, 0.04));
}

.table thead th {
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #03045e;
  border: none;
  border-bottom: 2px solid rgba(0, 119, 182, 0.1);
  white-space: nowrap;
}

.table tbody tr {
  transition: all 0.2s ease;
}

.table tbody tr:hover {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.03), rgba(0, 180, 216, 0.02));
}

.table tbody td {
  padding: 14px 16px;
  font-size: 13px;
  color: #1E293B;
  border: none;
  border-bottom: 1px solid #E2E8F0;
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* DataTables Modern Styling */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #0077b6;
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
  outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  margin: 0 2px !important;
  padding: 6px 12px !important;
  font-size: 13px;
  transition: all 0.2s ease !important;
  background: #fff !important;
  color: #475569 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg, #0077b6, #00b4d8) !important;
  color: #fff !important;
  border-color: #0077b6 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #0077b6, #00b4d8) !important;
  color: #fff !important;
  border-color: #0077b6 !important;
  font-weight: 600;
}

/* Modern Button Styles */
.btn-primary {
  background: linear-gradient(135deg, #0077b6, #0096c7) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 119, 182, 0.2);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #005f92, #0077b6) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.3);
}

.btn-secondary {
  background: linear-gradient(135deg, #0096c7, #00b4d8) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #0077b6, #0096c7) !important;
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, #10b981, #34d399) !important;
  border: none !important;
  color: #fff !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #f87171) !important;
  border: none !important;
  color: #fff !important;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  border: none !important;
  color: #fff !important;
}

.btn-info {
  background: linear-gradient(135deg, #06b6d4, #22d3ee) !important;
  border: none !important;
  color: #fff !important;
}

.btn-outline-primary {
  border: 2px solid #0077b6 !important;
  color: #0077b6 !important;
  background: transparent !important;
  font-weight: 500;
  border-radius: 8px;
}

.btn-outline-primary:hover {
  background: #0077b6 !important;
  color: #fff !important;
}

/* Modern Form Styles */
.form-control {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  transition: all 0.2s ease;
  background: #fff;
}

.form-control:focus {
  border-color: #0077b6;
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
  outline: none;
}

.form-select {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.form-select:focus {
  border-color: #0077b6;
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: #03045e;
  margin-bottom: 6px;
}

.form-check-input:checked {
  background-color: #0077b6;
  border-color: #0077b6;
}

.form-switch .form-check-input:checked {
  background-color: #10b981;
  border-color: #10b981;
}

/* Modern Badge Styles */
.badge {
  font-weight: 500;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
}

.badge.bg-primary,
.badge-primary {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.15), rgba(0, 180, 216, 0.1)) !important;
  color: #0077b6 !important;
}

.badge.bg-success,
.badge-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 211, 153, 0.1)) !important;
  color: #059669 !important;
}

.badge.bg-danger,
.badge-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(248, 113, 113, 0.08)) !important;
  color: #dc2626 !important;
}

.badge.bg-warning,
.badge-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.1)) !important;
  color: #d97706 !important;
}

.badge.bg-info,
.badge-info {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(34, 211, 238, 0.1)) !important;
  color: #0891b2 !important;
}

.badge.bg-secondary,
.badge-secondary {
  background: linear-gradient(135deg, rgba(0, 150, 199, 0.15), rgba(0, 180, 216, 0.1)) !important;
  color: #0096c7 !important;
}

/* Modern Alert Styles */
.alert {
  border-radius: 10px;
  border: none;
  padding: 14px 18px;
  font-size: 14px;
}

.alert-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.06));
  color: #059669;
  border-left: 4px solid #10b981;
}

.alert-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.06));
  color: #dc2626;
  border-left: 4px solid #ef4444;
}

.alert-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.06));
  color: #d97706;
  border-left: 4px solid #f59e0b;
}

.alert-info {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.1), rgba(0, 180, 216, 0.06));
  color: #0077b6;
  border-left: 4px solid #0077b6;
}

/* Modern Modal Styles */
.modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

.modal-header {
  border-bottom: 1px solid #E2E8F0;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.04), rgba(0, 180, 216, 0.02));
}

.modal-title {
  font-weight: 600;
  color: #03045e;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  border-top: 1px solid #E2E8F0;
  padding: 16px 24px;
}

.btn-close {
  opacity: 0.5;
  transition: all 0.2s ease;
}

.btn-close:hover {
  opacity: 1;
}

/* Modern Pagination Styles */
.pagination .page-item .page-link {
  border: 1px solid #E2E8F0;
  border-radius: 8px !important;
  margin: 0 3px;
  padding: 8px 14px;
  font-size: 13px;
  color: #475569;
  transition: all 0.2s ease;
}

.pagination .page-item .page-link:hover {
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  color: #fff;
  border-color: #0077b6;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  border-color: #0077b6;
  color: #fff;
  font-weight: 600;
}

/* Modern Dropdown Styles */
.dropdown-menu {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
  padding: 8px;
}

.dropdown-item {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1E293B;
  transition: all 0.15s ease;
}

.dropdown-item:hover {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.08), rgba(0, 180, 216, 0.04));
  color: #0077b6;
}

.dropdown-item i {
  color: #0077b6;
  margin-right: 10px;
}

/* Modern Progress Bar */
.progress {
  height: 8px;
  border-radius: 10px;
  background: rgba(0, 119, 182, 0.1);
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, #0077b6, #00b4d8);
  border-radius: 10px;
  transition: width 0.6s ease;
}

/* Modern Nav Tabs */
.nav-tabs {
  border-bottom: 2px solid #E2E8F0;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #64748B;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
  color: #0077b6;
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  color: #0077b6;
  border-bottom-color: #0077b6;
  background: transparent;
  font-weight: 600;
}

/* Modern Action Icons */
.action-icons {
  display: flex;
  gap: 6px;
}

.action-icons a,
.action-icons button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.action-icons .btn-edit,
.action-icons .edit-btn {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.1), rgba(0, 180, 216, 0.06));
  color: #0077b6;
}

.action-icons .btn-edit:hover,
.action-icons .edit-btn:hover {
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  color: #fff;
}

.action-icons .btn-delete,
.action-icons .delete-btn {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.06));
  color: #ef4444;
}

.action-icons .btn-delete:hover,
.action-icons .delete-btn:hover {
  background: linear-gradient(135deg, #ef4444, #f87171);
  color: #fff;
}

.action-icons .btn-view,
.action-icons .view-btn {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.1), rgba(148, 163, 184, 0.06));
  color: #64748B;
}

.action-icons .btn-view:hover,
.action-icons .view-btn:hover {
  background: linear-gradient(135deg, #64748B, #94A3B8);
  color: #fff;
}

/* Modern Stat Cards */
.stat-card {
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Dashboard Cards Color Variants */
.stat-card.blue {
  background: linear-gradient(135deg, #0077b6, #00b4d8);
}

.stat-card.teal {
  background: linear-gradient(135deg, #0096c7, #48cae4);
}

.stat-card.cyan {
  background: linear-gradient(135deg, #00b4d8, #90e0ef);
}

.stat-card.purple {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.stat-card.green {
  background: linear-gradient(135deg, #10b981, #34d399);
}

/* Modern List Group */
.list-group-item {
  border: 1px solid #E2E8F0;
  padding: 14px 18px;
  transition: all 0.2s ease;
}

.list-group-item:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.list-group-item:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.list-group-item:hover {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.04), rgba(0, 180, 216, 0.02));
}

.list-group-item.active {
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  border-color: #0077b6;
}

/* Modern Breadcrumb */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 20px;
}

.breadcrumb-item a {
  color: #0077b6;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.breadcrumb-item a:hover {
  color: #005f92;
}

.breadcrumb-item.active {
  color: #64748B;
  font-size: 13px;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #94A3B8;
}

/* Modern Tooltip */
.tooltip .tooltip-inner {
  background: #03045e;
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 12px;
}

.tooltip .tooltip-arrow::before {
  border-top-color: #03045e;
}

/* Modern Status Indicators */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.status-dot.online {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.status-dot.offline {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.status-dot.pending {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* Modern Avatar Styles */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

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

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
  border-radius: 8px;
}

.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
  border-radius: 14px;
}

/* Page Header Styles */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E2E8F0;
}

.page-header h1,
.page-header h2,
.page-header h3 {
  color: #03045e;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

/* Modern Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.1), rgba(0, 180, 216, 0.08));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-icon i {
  font-size: 32px;
  color: #0077b6;
}

.empty-state h4 {
  font-size: 18px;
  font-weight: 600;
  color: #03045e;
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  color: #64748B;
  margin-bottom: 20px;
}

/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(90deg, #E2E8F0 0px, #F1F5F9 50px, #E2E8F0 100px);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 6px;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .card-header {
    padding: 14px 16px;
  }

  .card-body {
    padding: 16px;
  }

  .table thead th,
  .table tbody td {
    padding: 10px 12px;
    font-size: 12px;
  }

  .stat-card {
    padding: 18px;
  }

  .stat-card .stat-value {
    font-size: 22px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================
   ENHANCED TEXT READABILITY & CLARITY
   Improved contrast and font weights
   ============================================ */

/* Headings - Darker and bolder */
h1, h2, h3, h4, h5, h6 {
  color: #0f172a;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

/* Page titles and headers */
.page-title,
.card-header h5,
.card-header h6,
.modal-title {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Body text - Improved readability */
p, span, div {
  color: inherit;
}

/* Table text improvements */
.table th {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table td {
  color: #334155 !important;
  font-weight: 450;
}

.table td a {
  color: #0077b6;
  font-weight: 500;
}

/* Improved text secondary */
.text-secondary {
  color: #475569 !important;
}

/* Small text improvements */
small, .small, .fs-7, .fs-8 {
  color: #64748b;
  font-weight: 450;
}

/* Badge text clarity */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Input and form readability */
.form-control,
.form-select {
  color: #1e293b !important;
  font-weight: 450;
}

.form-control::placeholder {
  color: #94a3b8 !important;
  font-weight: 400;
}

/* Dropdown text */
.dropdown-item {
  color: #334155;
  font-weight: 450;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #0f172a;
  font-weight: 500;
}

/* Sidebar nav text */
.nav-link {
  color: #334155;
  font-weight: 500;
}

.nav-link.active {
  color: #0077b6;
  font-weight: 600;
}

/* Alert text readability */
.alert {
  font-weight: 500;
}

/* Stat card values */
.stat-value,
.metric-value,
.count-value {
  color: #0f172a;
  font-weight: 700;
}

/* Labels and captions */
.stat-label,
.metric-label,
.caption {
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}

/* Price displays */
.price,
.amount,
.currency-value {
  color: #0f172a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Status text */
.status-active,
.text-success {
  color: #059669 !important;
  font-weight: 500;
}

.status-inactive,
.text-danger {
  color: #dc2626 !important;
  font-weight: 500;
}

.status-pending,
.text-warning {
  color: #d97706 !important;
  font-weight: 500;
}

/* Info text */
.text-info {
  color: #0891b2 !important;
  font-weight: 500;
}

/* Primary text color */
.text-primary {
  color: #0077b6 !important;
  font-weight: 500;
}

/* Card subtitles */
.card-subtitle {
  color: #64748b;
  font-weight: 500;
}

/* List items */
.list-group-item {
  color: #334155;
  font-weight: 450;
}

/* Breadcrumb text */
.breadcrumb-item {
  color: #64748b;
  font-weight: 500;
}

.breadcrumb-item.active {
  color: #0f172a;
  font-weight: 600;
}

/* Tooltip text */
[tooltip] {
  font-weight: 500;
}

/* Button text clarity */
.btn {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* DataTable text improvements */
.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
  color: #475569 !important;
  font-weight: 500;
}

/* Empty state text */
.empty-state-title,
.no-data-title {
  color: #0f172a;
  font-weight: 600;
}

.empty-state-text,
.no-data-text {
  color: #64748b;
  font-weight: 450;
}

/* Footer text */
.footer,
.footer p,
.footer span {
  color: #64748b;
  font-weight: 450;
}

/* Link hover states */
a:hover {
  color: #005f92;
}

/* Enhanced focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #00b4d8;
  outline-offset: 2px;
}

/* ============================================
   Dashboard Icon Animations
   ============================================ */

/* Stat card icon animations */
.stat-icon-wrap,
.order-stat-card .stat-icon-wrap,
.dash-stat-icon,
.card .stat-icon,
.dashboard-stat-icon {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-icon-wrap:hover,
.order-stat-card:hover .stat-icon-wrap,
.card:hover .stat-icon,
.dash-stat-icon:hover {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 8px 20px rgba(0, 180, 216, 0.35);
}

/* Icon bounce animation on hover */
.stat-icon-wrap i,
.order-stat-card .stat-icon-wrap i,
.dash-stat-icon i,
.card .stat-icon i {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.stat-icon-wrap:hover i,
.order-stat-card:hover .stat-icon-wrap i,
.card:hover .stat-icon i,
.dash-stat-icon:hover i {
  transform: scale(1.15);
}

/* Pulse animation for active/important stats */
@keyframes iconPulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 180, 216, 0.25);
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 180, 216, 0.45);
  }
}

.stat-icon-wrap.pulse,
.order-stat-card.active .stat-icon-wrap {
  animation: iconPulse 2s ease-in-out infinite;
}

/* Floating animation for dashboard icons */
@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.dashboard-card:hover .stat-icon-wrap,
.order-stat-card:hover .stat-icon-wrap {
  animation: iconFloat 1s ease-in-out infinite;
}

/* Gradient shine effect on icon backgrounds */
.stat-icon-wrap::before,
.order-stat-card .stat-icon-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
  border-radius: inherit;
}

.stat-icon-wrap {
  position: relative;
  overflow: hidden;
}

.stat-icon-wrap:hover::before,
.order-stat-card:hover .stat-icon-wrap::before {
  left: 100%;
}

/* Dashboard action button animations */
.dash-action-btn,
.action-btn,
.btn-action {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-action-btn:hover,
.action-btn:hover,
.btn-action:hover {
  transform: translateY(-3px) scale(1.05);
}

.dash-action-btn:active,
.action-btn:active,
.btn-action:active {
  transform: translateY(-1px) scale(0.98);
}

/* Card icon wiggle on page load */
@keyframes iconWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.stat-icon-wrap.animate-on-load {
  animation: iconWiggle 0.5s ease-in-out;
}

/* Quick stats counter animation */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-value,
.order-stat-card .stat-value,
.dash-stat-value {
  animation: countUp 0.4s ease-out forwards;
}

/* Stagger animation for multiple stat cards */
.order-stat-card:nth-child(1) .stat-value { animation-delay: 0.1s; }
.order-stat-card:nth-child(2) .stat-value { animation-delay: 0.2s; }
.order-stat-card:nth-child(3) .stat-value { animation-delay: 0.3s; }
.order-stat-card:nth-child(4) .stat-value { animation-delay: 0.4s; }
.order-stat-card:nth-child(5) .stat-value { animation-delay: 0.5s; }

/* Icon glow effect */
.stat-icon-wrap.glow,
.order-stat-card:hover .stat-icon-wrap {
  box-shadow: 0 0 20px rgba(0, 180, 216, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Ripple effect on icon click */
@keyframes iconRipple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.stat-icon-wrap.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.4);
  animation: iconRipple 0.6s ease-out;
  pointer-events: none;
}

/* Sidebar icon hover animations */
.wix-nav-icon {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wix-nav-item:hover .wix-nav-icon {
  transform: scale(1.15);
}

.wix-nav-item.active .wix-nav-icon {
  transform: scale(1.1);
}

/* Table action icons */
.dash-actions .dash-action-btn {
  position: relative;
  overflow: hidden;
}

.dash-actions .dash-action-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dash-actions .dash-action-btn:hover::after {
  opacity: 1;
}