@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
.nav-modal{
  display: none;
}
.showed{
  display: block;
}
/* .form-check-input:checked {
  background-color: #111315;
  border-color: gray;
}

.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='gray'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='gray'/%3e%3c/svg%3e");
} */
.blank{
  animation: blink s steps(1, end) infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
  background: #ff006a !important;
}
.active-nav-btn{
  border-color: #ff006a;
  color: #ff006a !important;
}
.btn-sonic{
  color: white;
  background: #ff006a;
  border-color: #ff006a;
}

.disactive-nav-btn{
  color: #ff006a99;
}
.border-sonic{
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  border-top: 1px solid #ff006a;
}
#asaid-nav::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#asaid-nav {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
@media (max-width: 570px) {
  .nav-link{
    font-size: 1rem!important;
  }
}
.bg-black{
  background-color: rgb(0 0 0/80%);
}
.btn-outline-pink{
  border-color:#ff006b !important;
  color:#ff006b;
}
.btn-outline-pink:hover{
  background:#ff006b !important;
  color:#FFF !important;
}
.btn-outline-pink:focus,
.btn-outline-pink.focus {
    box-shadow: 0 0 0 .2rem #ff006b7a;
}
.table th, .table td {
  vertical-align: middle;
  text-align: center;
}
.table img {
  border-radius: 10px;
}
.table thead th {
  background-color: #f8f9fa;
  font-weight: bold;
}
.table tbody tr:hover {
  background-color: #f1f1f1;
}
.overflow-auto {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.list-group {
  --bs-list-group-active-bg: #ff006a !important;
  --bs-list-group-active-border-color: #ff006a !important;
}
#loader-wrapper {
  margin: 0px;
  padding:0px;
position: fixed;
width: 100%;
height: 100%;
background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

/* Loader styling */
#loader {
text-align: center;
}

#loader-logo {
width: 56%;
max-width: 134px;
height: auto;
max-height: 56%;
object-fit: contain;
opacity: 1;
animation: fadein 2s linear infinite;
}

/* Spinner styles */
.spinner {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #fd4894;
width: clamp(180px, 45vw, 240px);
height: clamp(180px, 45vw, 240px);
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
animation: spin 2s linear infinite;
}

/* Spinner animation */
@keyframes spin {
0% { transform: rotate(0deg); opacity: 0.9;}
10% { transform: rotate(36deg); opacity: 0.7;}
20% { transform: rotate(72deg); opacity: 0.5;}
30% { transform: rotate(108deg); opacity: 0.4;}
40% { transform: rotate(144deg); opacity: 0.4;}
50% { transform: rotate(180deg); opacity: 0.5;}
60% { transform: rotate(216deg); opacity: 0.6;}
70% { transform: rotate(252deg); opacity: 0.7;}
80% { transform: rotate(288deg); opacity: 0.8;}
90% { transform: rotate(324deg); opacity: 1;}
100% { transform: rotate(360deg); opacity: 1; }
}

/* Logo fade-in animation */
@keyframes fadein {
0% { transform: rotate(360deg); opacity: 1;}
10% { transform: rotate(324deg); opacity: 1;}
20% { transform: rotate(288deg); opacity: 1;}
30% { transform: rotate(252deg); opacity: 0.9;}
40% { transform: rotate(216deg); opacity: 0.9;}
50% { transform: rotate(180deg); opacity: 0.8;}
60% { transform: rotate(144deg); opacity: 0.9;}
70% { transform: rotate(108deg); opacity: 0.9;}
80% { transform: rotate(72deg); opacity: 1;}
90% { transform: rotate(36deg); opacity: 1;}
100% { transform: rotate(0deg); opacity: 1; }
}

/* Qaima visual system */
:root {
  --qaima-bg: #ffffff;
  --qaima-panel: rgba(255, 255, 255, .92);
  --qaima-panel-2: rgba(139, 29, 255, .06);
  --qaima-line: rgba(17, 24, 39, .12);
  --qaima-text: #111827;
  --qaima-muted: #667085;
  --qaima-violet: #8b1dff;
  --qaima-violet-2: #b334ff;
  --qaima-cyan: #39d8ff;
}

body {
  color: var(--qaima-text);
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 29, 255, .18), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(57, 216, 255, .10), transparent 26rem),
    linear-gradient(180deg, #ffffff 0%, #f7f5ff 54%, #ffffff 100%) !important;
}

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

.bg-black,
#asaid-nav {
  background: rgba(255, 255, 255, .90) !important;
  border-left: 1px solid var(--qaima-line);
  box-shadow: 0 24px 80px rgba(88, 28, 135, .14);
  backdrop-filter: blur(18px);
}

.qaima-language-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--qaima-line, rgba(255,255,255,.18));
  border-radius: 14px;
  background: rgba(139, 29, 255, .06);
}

.qaima-language-switch a {
  padding: 7px 4px;
  border-radius: 10px;
  color: var(--qaima-muted, #667085);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.qaima-language-switch a.active {
  color: #fff;
  background: linear-gradient(135deg, #8b1dff, #b334ff);
  box-shadow: 0 5px 14px rgba(139, 29, 255, .24);
}

html[dir="ltr"] body,
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea,
html[dir="ltr"] button {
  text-align: left;
}

html[dir="ltr"] .text-center,
html[dir="ltr"] .btn,
html[dir="ltr"] .qaima-language-switch a {
  text-align: center;
}

html[dir="ltr"] #asaid-nav {
  border-right: 1px solid var(--qaima-line);
  border-left: 0;
  border-radius: 0 28px 28px 0;
}

html[dir="ltr"] #asaid-nav .nav-link,
html[dir="ltr"] #asaid-nav .dropdown > a,
html[dir="ltr"] .qaima-user-trigger {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .qaima-user-dropdown .dropdown-item {
  direction: ltr;
}

html[dir="ltr"] .qaima-user-action-arrow {
  margin-right: 0;
  margin-left: auto;
  transform: rotate(180deg);
}

html[dir="ltr"] #asaid-nav .nav-link i {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

@media (min-width: 576px) {
  html[dir="ltr"] .admin-content {
    padding-right: 24px;
    padding-left: 104px;
  }

  html[dir="ltr"] .admin-dashboard,
  html[dir="ltr"] .container > .row > [class*="offset-"],
  html[dir="ltr"] .container-fluid > .row > [class*="offset-"] {
    margin-right: auto;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  html[dir="ltr"] .products-admin-container {
    padding-right: 24px;
    padding-left: 112px;
    transition: padding-left .25s ease;
  }

  html[dir="ltr"] .products-admin-container .products-page-shell {
    margin-right: auto;
    margin-left: 0;
  }

  html[dir="ltr"] body.products-sidebar-open .products-admin-container {
    padding-right: 24px;
    padding-left: 340px;
  }
}

#asaid-nav {
  border-top-left-radius: 28px;
  border-bottom-left-radius: 28px;
}

#asaid-nav .nav-link {
  min-height: 46px;
  margin-bottom: 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--qaima-muted) !important;
}

#asaid-nav .nav-link:hover,
#asaid-nav .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff !important;
  border-color: rgba(139, 29, 255, .34);
  background: linear-gradient(135deg, var(--qaima-violet), var(--qaima-violet-2)) !important;
  box-shadow: 0 18px 36px rgba(139, 29, 255, .22);
}

.navbar.bg-black {
  border-bottom: 1px solid var(--qaima-line);
}

.container .bg-light,
.container-fluid .bg-light,
.tab-pane.border,
.modal-content,
.dropdown-menu,
.toast,
.list-group-item,
.card,
.overflow-auto {
  color: var(--qaima-text) !important;
  background: var(--qaima-panel) !important;
  border-color: var(--qaima-line) !important;
  box-shadow: 0 24px 80px rgba(88, 28, 135, .12);
  backdrop-filter: blur(18px);
}

.rounded,
.modal-content,
.tab-pane.border,
.overflow-auto,
.card {
  border-radius: 22px !important;
}

h1, h2, h3, h4, h5, h6,
.form-label,
label {
  color: var(--qaima-text);
}

.text-secondary,
.text-muted,
small {
  color: var(--qaima-muted) !important;
}

.form-control,
.form-select,
textarea,
.input-group-text {
  color: var(--qaima-text) !important;
  background: rgba(255, 255, 255, .07) !important;
  border-color: var(--qaima-line) !important;
  border-radius: 14px !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--qaima-violet-2) !important;
  box-shadow: 0 0 0 .22rem rgba(139, 29, 255, .2) !important;
}

.btn-primary,
.btn-sonic,
.btn-outline-pink:hover,
.list-group-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--qaima-violet), var(--qaima-violet-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(139, 29, 255, .24);
}

.btn-outline-pink,
.btn-outline-primary,
.btn-outline-danger {
  color: var(--qaima-violet-2) !important;
  border-color: rgba(139, 29, 255, .52) !important;
  background: rgba(139, 29, 255, .08) !important;
}

.btn-outline-pink:hover,
.btn-outline-primary:hover,
.btn-outline-danger:hover {
  color: #fff !important;
  background: linear-gradient(135deg, var(--qaima-violet), var(--qaima-violet-2)) !important;
}

.table {
  color: var(--qaima-text);
  border-color: var(--qaima-line);
}

.table thead th {
  color: #111827;
  background: rgba(139, 29, 255, .16) !important;
  border-color: var(--qaima-line);
}

.table tbody tr {
  border-color: var(--qaima-line);
}

.table tbody tr:hover {
  background: rgba(139, 29, 255, .12) !important;
}

.table td,
.table th {
  border-color: var(--qaima-line);
}

#loader-wrapper {
  color: var(--qaima-text);
  background: var(--qaima-bg);
}

.spinner {
  border-color: rgba(139, 29, 255, .18);
  border-top-color: var(--qaima-violet-2);
  box-shadow: 0 0 70px rgba(139, 29, 255, .24);
}

.btn-primary,
.btn-sonic,
.btn-outline-pink:hover,
.btn-outline-primary:hover,
.btn-outline-danger:hover,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
#asaid-nav .nav-link:hover,
#asaid-nav .nav-link.active,
.list-group-item.active {
  color: #fff !important;
}

/* Qaima admin redesign */
html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

.admin-content {
  min-height: 100vh;
  padding: 18px 14px 56px;
}

.admin-dashboard,
.container > .row > [class*="offset-"],
.container-fluid > .row > [class*="offset-"] {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding-top: 32px;
  padding-bottom: 60px;
}

@media (min-width: 576px) {
  .admin-content {
    padding-right: 104px;
    padding-left: 24px;
  }

  .admin-dashboard,
  .container > .row > [class*="offset-"],
  .container-fluid > .row > [class*="offset-"] {
    width: min(1180px, calc(100% - 18px));
    margin-right: 0;
    margin-left: auto;
  }
}

.qaima-sidebar {
  width: 92px;
  max-width: calc(100vw - 22px);
  padding: 18px 14px !important;
  border: 1px solid rgba(139, 29, 255, .12);
  border-right: 0;
  scrollbar-width: none;
}

.qaima-sidebar::-webkit-scrollbar {
  display: none;
}

.qaima-sidebar.showed {
  width: 320px;
}

#asaid-nav.qaima-sidebar-closed {
  display: none !important;
}

.qaima-sidebar-brand {
  min-height: 64px;
  padding: 6px 0 14px;
}

.qaima-sidebar-brand .nav-text {
  color: var(--qaima-text) !important;
  font-weight: 950;
}

.qaima-sidebar-brand img,
.qaima-mobile-nav img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(139, 29, 255, .18));
}

#asaid-nav hr {
  margin: 12px 0;
  border-color: rgba(139, 29, 255, .14);
  opacity: 1;
}

#asaid-nav .nav-item {
  margin: 2px 0;
}

#asaid-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 13px;
  font-weight: 800;
  letter-spacing: 0;
}

#asaid-nav .nav-link i {
  min-width: 24px;
  font-size: 1.25rem;
  line-height: 1;
}

.qaima-user-menu {
  flex-shrink: 0;
}

.qaima-user-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 8px;
  color: var(--qaima-text);
  text-align: right;
  background: rgba(139, 29, 255, .055);
  border: 1px solid rgba(139, 29, 255, .12);
  border-radius: 18px;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.qaima-user-trigger::after {
  display: none;
}

.qaima-user-trigger:hover,
.qaima-user-trigger:focus-visible,
.qaima-user-trigger[aria-expanded="true"] {
  color: var(--qaima-text);
  background: rgba(139, 29, 255, .10);
  border-color: rgba(139, 29, 255, .30);
  box-shadow: 0 12px 28px rgba(88, 28, 135, .14);
  outline: none;
}

.qaima-user-trigger:active {
  transform: scale(.98);
}

.qaima-user-avatar {
  position: relative;
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: visible;
  background: linear-gradient(135deg, rgba(139, 29, 255, .18), rgba(57, 216, 255, .18));
  border: 1px solid rgba(139, 29, 255, .18);
  border-radius: 13px;
}

.qaima-user-avatar img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.qaima-user-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  background: #20c997;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(32, 201, 151, .4);
}

.qaima-user-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  line-height: 1.25;
}

.qaima-user-copy strong,
.qaima-user-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qaima-user-copy strong {
  color: var(--qaima-text);
  font-size: .92rem;
  font-weight: 900;
}

.qaima-user-copy small {
  margin-top: 3px;
  color: var(--qaima-muted) !important;
  font-size: .72rem;
  font-weight: 700;
}

.qaima-user-chevron {
  color: var(--qaima-muted);
  font-size: .78rem;
  transition: transform .2s ease;
}

.qaima-user-trigger[aria-expanded="true"] .qaima-user-chevron {
  transform: rotate(180deg);
}

.qaima-user-dropdown {
  --bs-dropdown-color: #101828;
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-link-color: #101828;
  --bs-dropdown-link-hover-color: #6f16cc;
  --bs-dropdown-link-hover-bg: #f3eaff;
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-link-active-bg: #8b1dff;
  width: 276px;
  max-width: calc(100vw - 28px);
  margin-bottom: 10px !important;
  padding: 8px;
  color: #101828 !important;
  background: #ffffff !important;
  border: 1px solid rgba(139, 29, 255, .14) !important;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(50, 20, 90, .20) !important;
}

.qaima-user-dropdown-head {
  display: flex;
  min-width: 0;
  padding: 8px 10px 10px;
  flex-direction: column;
}

.qaima-user-dropdown-head span {
  color: #667085 !important;
  font-size: .72rem;
  font-weight: 700;
}

.qaima-user-dropdown-head strong {
  overflow: hidden;
  margin-top: 3px;
  color: #101828 !important;
  font-size: .93rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qaima-user-dropdown .dropdown-divider {
  margin: 4px 2px;
  border-color: rgba(139, 29, 255, .12);
}

.qaima-user-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 9px;
  color: #101828 !important;
  font-size: .86rem;
  font-weight: 800;
  text-align: start;
  background: #f8f7fc !important;
  border: 1px solid transparent;
  border-radius: 13px;
}

.qaima-user-dropdown .dropdown-item:hover,
.qaima-user-dropdown .dropdown-item:focus-visible {
  color: #6f16cc !important;
  background: #f3eaff !important;
  border-color: rgba(139, 29, 255, .16);
  outline: none;
}

.qaima-user-action-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: var(--qaima-violet);
  place-items: center;
  background: rgba(139, 29, 255, .09);
  border-radius: 10px;
}

.qaima-user-action-arrow {
  margin-right: auto;
  color: var(--qaima-muted);
  font-size: .72rem;
}

.qaima-user-dropdown .qaima-logout-action {
  color: #ffffff !important;
  background: linear-gradient(135deg, #d92d20, #b42318) !important;
  box-shadow: 0 8px 18px rgba(217, 45, 32, .18);
}

.qaima-user-dropdown .qaima-logout-action:hover,
.qaima-user-dropdown .qaima-logout-action:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(135deg, #b42318, #912018) !important;
  border-color: rgba(255, 255, 255, .24);
}

.qaima-logout-action .qaima-user-action-icon {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .16);
}

.qaima-country-picker {
  position: relative;
  flex: 0 0 180px;
  max-width: 180px;
  direction: rtl;
}

.qaima-country-picker-compact {
  flex-basis: 122px;
  max-width: 122px;
}

.qaima-country-picker-wide {
  width: 100%;
  max-width: none;
  flex-basis: 100%;
}

.qaima-country-picker-wide .qaima-country-trigger {
  border-radius: 15px;
}

.qaima-country-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.qaima-country-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 50px;
  padding: 8px 12px;
  color: #101828;
  font-size: .76rem;
  font-weight: 850;
  text-align: right;
  background: #fff;
  border: 1px solid #e2d8ee;
  border-radius: 15px 0 0 15px;
}

.qaima-country-trigger:hover,
.qaima-country-trigger:focus-visible,
.qaima-country-trigger[aria-expanded="true"] {
  border-color: #a855f7;
  box-shadow: 0 0 0 4px rgba(139, 29, 255, .13);
  outline: none;
}

.qaima-country-selected {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qaima-country-trigger i {
  flex: 0 0 auto;
  color: #8b1dff;
  font-size: .7rem;
  transition: transform .2s ease;
}

.qaima-country-trigger[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.qaima-country-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 1060;
  width: min(330px, calc(100vw - 36px));
  padding: 9px;
  background: #fff;
  border: 1px solid rgba(139, 29, 255, .16);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(50, 20, 90, .22);
}

.qaima-country-search {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  color: #101828;
  background: #f8f7fc;
  border: 1px solid #e5dcef;
  border-radius: 12px;
  outline: none;
}

.qaima-country-search:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(139, 29, 255, .11);
}

.qaima-country-list {
  max-height: 260px;
  margin-top: 7px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c084fc transparent;
}

.qaima-country-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  color: #344054;
  font-size: .8rem;
  font-weight: 750;
  text-align: right;
  background: transparent;
  border: 0;
  border-radius: 10px;
}

.qaima-country-option:hover,
.qaima-country-option:focus-visible {
  color: #6f16cc;
  background: #f3eaff;
  outline: none;
}

.qaima-country-option i {
  color: #8b1dff;
  opacity: 0;
}

.qaima-country-option[aria-selected="true"] {
  color: #6f16cc;
  background: #f3eaff;
}

.qaima-country-option[aria-selected="true"] i {
  opacity: 1;
}

.qaima-country-empty {
  padding: 18px 10px 10px;
  color: #667085;
  font-size: .8rem;
  text-align: center;
}

@media (max-width: 575.98px) {
  .qaima-country-picker {
    flex-basis: 155px;
    max-width: 155px;
  }

  .qaima-country-trigger {
    font-size: .7rem;
  }

  .qaima-country-picker-compact {
    flex-basis: 108px;
    max-width: 108px;
  }

  .qaima-country-picker-wide {
    max-width: none;
    flex-basis: 100%;
  }
}

@media (min-width: 576px) {
  .qaima-sidebar:not(.showed) .qaima-user-trigger {
    justify-content: center;
    padding: 8px 4px;
  }

  .qaima-sidebar:not(.showed) .qaima-user-dropdown {
    min-width: 276px;
  }
}

.qaima-mobile-nav {
  margin: 10px;
  border: 1px solid rgba(139, 29, 255, .12);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(88, 28, 135, .12);
}

.navbar-dark .navbar-toggler-icon {
  filter: invert(1);
}

.dashboard-hero,
.dashboard-filter,
.metric-card,
.chart-panel,
.empty-state {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(139, 29, 255, .12);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 70px rgba(88, 28, 135, .12);
  backdrop-filter: blur(18px);
}

.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 220px;
  padding: clamp(24px, 4vw, 46px);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(247, 242, 255, .90)),
    radial-gradient(circle at 8% 18%, rgba(139, 29, 255, .18), transparent 18rem);
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -58px;
  bottom: -92px;
  width: 270px;
  height: 270px;
  border-radius: 42%;
  background: linear-gradient(135deg, rgba(139, 29, 255, .95), rgba(179, 52, 255, .88));
  opacity: .12;
  transform: rotate(26deg);
}

.dashboard-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--qaima-violet);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-hero h1 {
  margin: 0;
  color: #101828;
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.dashboard-hero p {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--qaima-muted);
  font-size: 1.05rem;
  line-height: 1.9;
}

.hero-badge {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 12px 16px;
  color: #5b10b6;
  font-weight: 900;
  border: 1px solid rgba(139, 29, 255, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
}

.dashboard-filter {
  margin-top: 18px;
  padding: 18px;
  border-radius: 24px;
}

.dashboard-filter .btn {
  min-height: 50px;
  border-radius: 16px !important;
  font-weight: 900;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.metric-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 148px;
  padding: 24px;
  border-radius: 26px;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset-inline-start: -64px;
  top: -72px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  opacity: .14;
}

.metric-sales::before {
  background: var(--qaima-violet);
}

.metric-visitors::before {
  background: #00a6d6;
}

.metric-icon {
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  color: #fff;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--qaima-violet), var(--qaima-violet-2));
  box-shadow: 0 18px 34px rgba(139, 29, 255, .24);
}

.metric-visitors .metric-icon {
  background: linear-gradient(135deg, #00a6d6, var(--qaima-cyan));
  box-shadow: 0 18px 34px rgba(0, 166, 214, .18);
}

.metric-icon i {
  font-size: 1.7rem;
}

.metric-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--qaima-muted);
  font-weight: 800;
}

.metric-card strong {
  display: block;
  color: #101828;
  font-size: clamp(1.7rem, 4vw, 2.45rem);
  font-weight: 950;
  line-height: 1.15;
}

.chart-panel {
  margin-top: 18px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 28px;
}

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.chart-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  font-weight: 950;
}

.chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--qaima-muted);
  font-weight: 800;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot.sales {
  background: var(--qaima-violet);
}

.legend-dot.visitors {
  background: #00a6d6;
}

.chart-wrap {
  position: relative;
  height: min(420px, 52vh);
  min-height: 310px;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 310px;
  padding: 28px;
  text-align: center;
  border-radius: 24px;
  background: rgba(139, 29, 255, .045);
}

.empty-state i {
  color: var(--qaima-violet);
  font-size: 3rem;
}

.empty-state h3 {
  margin: 12px 0 6px;
  font-weight: 950;
}

.empty-state p {
  margin: 0;
  color: var(--qaima-muted);
}

.form-control,
.form-select,
textarea,
.input-group-text {
  min-height: 46px;
  background: #ffffff !important;
}

.table {
  overflow: hidden;
  border-radius: 18px;
}

.modal-content,
.dropdown-menu,
.toast,
.card,
.list-group-item,
.tab-pane.border,
.overflow-auto {
  border: 1px solid rgba(139, 29, 255, .12) !important;
}

@media (max-width: 767.98px) {
  .container > .row > [class*="offset-"],
  .container-fluid > .row > [class*="offset-"] {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
  }

  .admin-content,
  html[dir="ltr"] .admin-content,
  .admin-dashboard {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .dashboard-hero,
  .chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-badge {
    width: 100%;
    justify-content: center;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 126px;
  }

  .chart-wrap {
    height: 330px;
  }
}

/* Products page refinements */
.products-admin-container {
  width: 100%;
  max-width: none;
  padding: 88px 24px 60px;
  padding-right: 112px;
  transition: padding-right .25s ease;
}

.products-admin-container .products-page-shell {
  width: 100%;
  max-width: 1600px;
  margin: 0 0 0 auto;
}

@media (min-width: 768px) {
  body.products-sidebar-open .products-admin-container {
    padding-right: 340px;
  }
}

.products-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(139, 29, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 44px rgba(88, 28, 135, .09);
  backdrop-filter: blur(16px);
  text-align: start;
}

.products-page-head h2 {
  margin: 0;
  color: #101828;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 950;
}

.products-page-head p {
  margin: 6px 0 0;
  color: var(--qaima-muted);
  font-weight: 700;
}

.products-add-top-btn {
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: 18px;
  border-radius: 16px !important;
}

.product-view-panel[hidden] {
  display: none !important;
}

.product-list-panel {
  margin-top: 18px;
}

.product-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(190px, .8fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid rgba(139, 29, 255, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 44px rgba(88, 28, 135, .09);
  backdrop-filter: blur(16px);
}

.product-toolbar .form-label {
  margin-bottom: 7px;
  font-weight: 900;
}

.product-search .input-group-text {
  color: var(--qaima-violet);
  background: #fff !important;
}

.product-toolbar-actions {
  display: flex;
  justify-content: flex-end;
}

.product-columns-menu {
  min-width: 250px;
  max-height: 360px;
  overflow: auto;
}

.product-columns-menu .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  padding-right: 1.7rem;
  color: var(--qaima-text);
  font-weight: 800;
}

.product-table-wrap {
  max-height: 66vh !important;
}

.product-table {
  min-width: 1120px;
}

.product-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

.product-table td,
.product-table th {
  padding: 12px 14px;
}

.product-name-cell strong {
  display: block;
  min-width: 150px;
  color: #101828;
  font-weight: 950;
}

.product-price {
  color: var(--qaima-violet);
  font-weight: 950;
  white-space: nowrap;
}

.product-thumb {
  width: 68px !important;
  height: 68px;
  object-fit: cover;
  border: 1px solid rgba(139, 29, 255, .14);
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(88, 28, 135, .12);
}

.product-description {
  max-width: 260px;
  color: var(--qaima-muted);
  line-height: 1.7;
  white-space: normal;
}

.product-chip,
.product-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 900;
  white-space: nowrap;
}

.product-chip {
  color: #5b10b6;
  background: rgba(139, 29, 255, .09);
}

.product-status.is-on {
  color: #047857;
  background: rgba(16, 185, 129, .12);
}

.product-status.is-off {
  color: #b42318;
  background: rgba(244, 63, 94, .12);
}

.product-row-check {
  width: 1.2rem;
  height: 1.2rem;
}

.product-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 46px;
  padding: 14px 16px;
  border: 1px solid rgba(139, 29, 255, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 44px rgba(88, 28, 135, .08);
}

.product-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-form-shell {
  display: grid;
  gap: 16px;
  text-align: start;
}

.product-form-card {
  padding: 18px;
  border: 1px solid rgba(139, 29, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 44px rgba(88, 28, 135, .09);
  backdrop-filter: blur(16px);
}

.product-form-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(139, 29, 255, .10);
}

.product-form-card-head i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--qaima-violet), var(--qaima-violet-2));
  box-shadow: 0 14px 26px rgba(139, 29, 255, .22);
}

.product-form-card-head h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 950;
}

.product-switch {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 48px 13px 14px;
  border: 1px solid rgba(139, 29, 255, .10);
  border-radius: 16px;
  background: rgba(139, 29, 255, .045);
}

.product-upload {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 230px;
  width: 100%;
  padding: 22px;
  color: var(--qaima-muted);
  text-align: center;
  border: 2px dashed rgba(139, 29, 255, .28) !important;
  border-radius: 22px;
  background: rgba(139, 29, 255, .045) !important;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.product-upload:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 29, 255, .52) !important;
  background: rgba(139, 29, 255, .075) !important;
}

.product-upload i {
  color: var(--qaima-violet);
  font-size: 3.4rem;
}

.product-upload span {
  color: var(--qaima-text);
  font-size: 1.05rem;
  font-weight: 950;
}

.product-upload img {
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 18px;
}

.product-options-list {
  display: grid;
  gap: 8px;
}

.product-option-row {
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(139, 29, 255, .10);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
}

.product-option-row .form-control {
  min-width: 130px;
  margin: 0 !important;
}

.product-option-row .btn {
  min-width: 44px;
}

.product-submit-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-bottom: 42px;
}

.product-submit-bar .btn {
  min-width: 180px;
}

@media (max-width: 991.98px) {
  .products-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .products-add-top-btn {
    width: 100%;
  }

  .product-toolbar {
    grid-template-columns: 1fr;
  }

  .product-toolbar-actions {
    justify-content: stretch;
  }

  .product-toolbar-actions .dropdown,
  .product-toolbar-actions .btn {
    width: 100%;
  }

  .product-actions-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .product-actions-buttons,
  .product-actions-buttons .btn,
  .product-submit-bar .btn {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .products-admin-container {
    padding: 24px 12px 48px;
  }

  .product-form-card,
  .product-toolbar,
  .product-actions-bar {
    border-radius: 18px;
  }

  .product-option-row {
    display: grid;
  }
}