:root {
  --activeText: #014b40;
  --activeBg:#affebf;
  --inactiveText: #616161;
  --inactiveBg:#0000000f;
  --statusBorderRadius:10px;
  --statusPadding:5px 10px;
  --primary-color: #1e40af;
  --custom-padding: 2rem;
  --text-color: #f9fafb;
}
.dark-theme {
  --primary-color: #0f172a;
  --text-color: #ffffff;
}

html {
    font-size: 14px!important;
}

body {
	 font-family: 'Inter'!important;
	 font-size: 14px !important;
   color: #000000!important;
}

.tailwind_apply .wk-icon{
  font-size: 20px;
  text-align: center;
}


.tailwind_apply .text-dark-gray {
  --tw-text-opacity: 1;
  color: rgb(68 68 68 / var(--tw-text-opacity, 1));
}

.tailwind_apply .group:hover .group-hover\:text-light-cyan {
  --tw-text-opacity: 1;
  color: rgb(12 116 132 / var(--tw-text-opacity, 1));
}


.tailwind_apply .active-status{
  border-radius: var(--statusBorderRadius);
  padding: var(--statusPadding);
  background-color: var(--activeBg);
  color:var(--activeText);
}

.tailwind_apply .inactive-status{
  border-radius: var(--statusBorderRadius);
  padding: var(--statusPadding);
  background-color: var(--inactiveBg);
  color:var(--inactiveText);
}

.tailwind_apply header .p {
    margin: 0!important;
}

.tailwind_apply .tail-hidden {
  display: none;
}
@media (min-width: 768px) {
  .tailwind_apply .tail-md-block {
    display: block;
  }
}
#mvm-body-id hr {
    margin-top: 20px;
    margin-bottom: 20px;
}

#mvm-layout-right{
  width: 100%;
  border-radius:20px;
}
#mvm-body-id #page-heading {
     padding: 15px;
}
#mvm-layout-right .footer p{
  text-align: center;
  color: #000000;
  font-weight: 300;
}
#header-id, #mvm-header-id{
  position: sticky;
  top: 0;
  z-index: 50;
}
.wk-flex-class {
    display: flex;
}

#mvm-header-id::before ,#mvm-footer-id {
background-color: white;
}
#mvm-footer-id footer{
  color: #000000!important;
  padding-top: 0px!important;
}
#mvm-body-id{
  height: calc(100vh-100px);
}
@media (min-width: 768px) {
    #mvm-header-id header{
        border-top-left-radius: 20px;
        border-left-width: 1px;
    }
    #mvm-footer-id footer{
        border-bottom-left-radius: 20px;
        border-left-width: 1px;
    }
    #mvm-body-id{
        border-left: 1px solid #CCD3DF;
    }
}

.wk-zenith-rtl{
    direction: rtl;
}
.wk-zenith-btn {
    background-color: var(--themeColor);
    color: var(--themeTextColor);
    padding: 10px 16px;
    border-radius: 4px;
    box-shadow: 15px 3px 15px rgba(68,68,68,0.3);
    transition: all 0.3s ease;
    -moz-animation: all 0.3s ease;
    -webkit-animation: all 0.3s ease;
    -o-animation: all 0.3s ease;
}
.wk-zenith-btn:hover {
    box-shadow: none;
    opacity: 0.9;
}
.wk-zenith-tabs-container{
    border: 1px solid #CCC;
    margin-bottom: 10px;
    background-color: #FFF;
    border-radius: 6px;
}
.wk-zenith-tabs{
    padding-left: 8px;
    padding-right: 8px;
}
.wk-zenith-tabs > ul::-webkit-scrollbar {
    height: 2px;
}
.wk-zenith-tabs > ul:hover::-webkit-scrollbar {
    height: 5px;
}
.wk-zenith-tabs > ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
}
.wk-zenith-tabs > ul::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.wk-zenith-tabs li{
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    padding: 10px 8px;
    white-space: nowrap;
}
.wk-zenith-tabs li.active{
    border-bottom: 2px solid var(--themeColor);
    color: var(--themeColor);
}
.wk-zenith-tabs li.active a{
    cursor: default;
}
.wk-zenith-tabs-more-option > p{
    display: flex;
    align-items: center;
    font-size: 20px;
    padding: 10px 8px;
    cursor: pointer;
}
.wk-zenith-tabs-search-container, .wk-zenith-tabs-search-container + div > button{
    padding: 10px 8px;
}
.wk-zenith-tabs-search-container > input{
    height: 35px;
}
.wk-zenith-tabs-sort{
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    z-index: 10;
    position: absolute;
    right: 5px;
    top: 50px;
    padding: 5px;
}
.wk-zenith-tabs-sort-rtl{
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    z-index: 10;
    position: absolute;
    left: 5px;
    top: 50px;
    padding: 5px;
}
.wk-zenith-tabs-sort > li, .wk-zenith-tabs-sort-rtl > li {
    padding: 5px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.wk-zenith-tabs-sort > li > span >  svg, .wk-zenith-tabs-sort-rtl > li > span > svg {
    width: 15px;
    height: 24px;
}

.wk-zenith-label-table > thead > tr > th{
    vertical-align: bottom;
    border-bottom: 1px solid #CCC;
    padding: 8px;
    text-align: left;
}
.wk-zenith-label-table > tbody > tr{
    border-top: 1px solid #CCC;
}
.wk-zenith-label-table > tbody > tr > td {
    padding: 8px;
    text-align: left;
}
.wk-zenith-section{
    background-color: var(--formBgColor);
    border: 1px solid var(--formBorderColor);
    padding: 16px 18px;
    border-radius: 6px;
}
.wk-zenith-preview-image {
    width: 100%;
    height: 100%;
    border: 1px solid #CCD3DF;
    object-fit: contain;
}
.wk-zenith-tagit-elem{
    color: var(--themeTextColor);
    background-color: var(--themeColor);
    border-radius: 16px;
    display: flex;
    gap: 10px;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.wk-zenith-datatable-wrapper{
    border: 1px solid #CCD3DF;
    border-radius: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* .wk-zenith-datatable{
    border: 1px solid #CCD3DF;
    border-radius: 6px;
} */
.wk-zenith-datatable > thead{
    background-color: var(--pageBgColor);
    text-align: left;
}
.wk-zenith-datatable > tbody{
    background-color: #FFFFFF;
}
.wk-zenith-datatable > thead  th{
    font-weight: 600;
    font-size: 14px;
    color: #444444;
    padding: 10px 12px;
    white-space: nowrap;
}
.wk-zenith-datatable > tbody > tr {
    border-top: 1px solid #CCD3DF;
}
.wk-zenith-datatable > tbody  td{
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    padding: 10px 12px;
}
.wk-zenith-datatable-footer{
    margin-top: 10px;
    border: 1px solid #CCD3DF;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: #FFF;
}
.wk-zenith-datatable-page-entry{
    background-color: #FFF;
    border: 1px solid #CCD3DF;
    border-radius: 6px;
    padding: 10px 16px;
}
.wk-zenith-note{
    border-left: 2px solid var(--themeColor); /* Left border in your color */
    background-color: #e0f5f7; /* Light version of #0C7484 */
    padding: 10px 15px;
    margin: 10px 0;
    font-family: Arial, sans-serif;
    color: #333;
    border-radius: 4px;
}
.wk-zenith-note-rtl{
    border-right: 2px solid var(--themeColor); /* Left border in your color */
    background-color: #e0f5f7; /* Light version of #0C7484 */
    padding: 10px 15px;
    margin: 10px 0;
    font-family: Arial, sans-serif;
    color: #333;
    border-radius: 4px;
}
.wk-zenith-note > strong, .wk-zenith-note-rtl > strong {
    color: var(--themeColor);
}
.wk-zenith-dummy-data-table tbody tr{
    border-top: 1px solid #CCC;
}
.wk-zenith-dummy-data-table tbody tr > td{
    padding: 5px;
}
.wk-zenith-dummy-data-table tbody tr > td:last-child{
    font-weight: bold;
}
.wk-zenith-flyout-menu{
    left: 0;
    margin-left: 0.5rem;
}
.wk-zenith-flyout-menu-rtl{
    right: 0;
    margin-right: 0.5rem;
}

/* .journal-scroll::-webkit-scrollbar {
  width: 14px;
  cursor: pointer;
  display: none;
}

.journal-scroll::-webkit-scrollbar-track {
  background-color: #fff;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #E9E9E9;
}

.journal-scroll::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-color: #E9E9E9;
  border-radius: 12px;
  border: 3px solid transparent;
  background-clip: content-box;
} */

.plan-color{
  width:12px;
  height: 12px;
  border-radius: 50%;
}

/* custom scrollbar */
.scrollbar-custom {
  scrollbar-width: thin;             /* Firefox */
  scrollbar-color: #444444 #f1f1f1;  /* Firefox */

  /* Chrome, Edge, Safari */
}
.scrollbar-custom::-webkit-scrollbar {
  width: 8px;
}
.scrollbar-custom::-webkit-scrollbar-track {
  background: #F1F4F9;
  border-radius: 8px;
}
.scrollbar-custom::-webkit-scrollbar-thumb {
  background-color: #F1F4F9;
  border-radius: 8px;
}
.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background-color: #F1F4F9;
}

#shipping a {
  color: var(--themeColor);
}

.main_body_shipping_range #page-heading span {
      font-size: 21px!important;
}
/* ---------- Toggle restyle scoped to #mvm-layout-right ---------- */
#mvm-layout-right .parent_button {
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 50px !important;        /* match new toggle width */
  height: 28px !important;       /* match new toggle height */
  padding: 2px !important;       /* inner gap for knob */
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  background: transparent !important; /* set by .on / .off */
  border: none !important;
  transition: background-color .3s ease, border-color .3s ease;
  margin: 0 !important;          /* neutralize bootstrap margins */
  vertical-align: middle;
}

/* Make sure Bootstrap .row/.col styles on .first_child don't break it */
#mvm-layout-right .parent_button .first_child {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
  position: relative !important;
  left: 0 !important;            /* override inline style left:15px */
  transform: translateX(0) !important;
  will-change: transform;
}

/* ON / OFF backgrounds (scoped) */
#mvm-layout-right .parent_button.on {
  background: var(--themeColor) !important; /* green / theme color */
  border-color: transparent !important;
}

#mvm-layout-right .parent_button.off {
  background: #FF6467 !important; /* red */
  border-color: transparent !important;
}

/* knob positions */
#mvm-layout-right .parent_button.on .first_child {
  transform: translateX(22px) !important; /* 50 - 24 - (2*2) = 22 */
}

#mvm-layout-right .parent_button.off .first_child {
  transform: translateX(0) !important;
}

/* focus / keyboard visible ring for accessibility */
#mvm-layout-right .parent_button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.12) !important;
}

/* extra protection: if inline style attribute exists on first_child */
#mvm-footer-id{margin-top:20px;}


#mvm-layout-right .wk_btn {
  padding: 0.5rem 0.75rem;
  background: var(--themeColor) !important; /* green / theme color */
}
#mvm-layout-right .add-btn {
  background: var(--themeColor) !important; /* green / theme color */
}
.link-hover-underline {
  color: #2E8290;      /* Default link color */
  text-decoration: none; /* Remove default underline */
  transition: all 0.2s ease; /* Smooth transition on hover */
}

.link-hover-underline:hover {
  text-decoration: underline; /* Show underline on hover */
}
.weglot-container .weglot_switcher{
  left: 20px;
  width: 150px;
}

/* for Onboarding pages */
.mp-mt-40 {
  margin-top: 40px;
}

.mp-mb-40 {
  margin-bottom: 40px;
}

.heading-line {
  font-weight: 600;
}

.heading-line::before,
.heading-line::after {
  display: inline-block;
  content: "";
  border-top: 0.15rem solid var(--themeColor);
  width: 20%;
  margin: 0 1rem;
  vertical-align: middle;
}

.skip_step {
  background-color: #484848;
  color: var(--themeTextColor);
  padding: 10px 16px;
  border-radius: 4px;
  box-shadow: 15px 3px 15px rgba(68, 68, 68, 0.3);
  transition: all 0.3s ease;
  -moz-animation: all 0.3s ease;
  -webkit-animation: all 0.3s ease;
  -o-animation: all 0.3s ease;
}

.skip_step:hover {
  box-shadow: none;
  opacity: 0.9;
}

/* alert */
.tailwind_apply .BS-alert {
  padding: 1rem;
  margin: 0.5rem 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.375rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Variants */
.tailwind_apply .BS-alert-warning {
  background-color: #fcf8e3;
  color: #8a6d3b;
  border-color: #faebcc;
}

.tailwind_apply .BS-alert-success {
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

.tailwind_apply .BS-alert-error {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

.tailwind_apply .BS-alert-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border-color: #bee5eb;
}


#display_count_global_ugc_outer_div{
  display: none;
}
.img-alt-icon img{
  margin: auto;
}

div#custom-option-block .bootstrap-datetimepicker-widget.dropdown-menu{
    inset: auto !important;
}

.wk-zenith-copy-text-container{
    display: flex;
    gap: 8px;
    align-items: center;
}
.wk-zenith-copy-text{
    flex:1;
    min-width:0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.wk-copy-icon{
    cursor: pointer;
}
.variant_more_action_dropdown{
  margin-right: 230px!important;
}
.drag-handle{
  cursor:grab;
  width:25px;
  padding-top: 15px;
}


@media (max-width:768px){

    .mce-window{
        width:95vw !important;
        max-width:95vw !important;
        left:50% !important;
        margin-left:0 !important;
        transform:translateX(-50%) !important;
    }

    .mce-window .mce-container-body{
        width:95vw !important;
        max-width:95vw !important;
    }

    .mce-window textarea.mce-textbox{
        left:10px !important;
        width:calc(95vw - 40px) !important;
        max-width:calc(95vw - 40px) !important;
    }

    .mce-window .mce-foot{
        width:95vw !important;
        max-width:95vw !important;
    }
}

#banner_video_cancel {
    position: relative;
    z-index: 9999 !important;
}

#change_banner_modal {
  padding-left: 12px;
  padding-right: 12px;
}

/* @media (max-width:768px) { */
.mce-widget.mce-btn.mce-primary.mce-abs-layout-item.mce-first.mce-btn-has-text{
    left:12px !important;
    right: auto !important;
  }

 .mce-widget.mce-btn.mce-abs-layout-item.mce-last.mce-btn-has-text{
    left: auto !important;
    right:12px !important;
  }
/* } */

/* for manage img alt text */
.wk-alt-status {
  position: relative;
}
.wk-alt-done {
  border: 3px solid #28a745!important;
}
.wk-alt-check-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #28a745!important;
  font-size: 28px!important;
  z-index: 2!important;
  pointer-events: none!important;
}
.wk-alt-missing:hover::after {
  content: attr(data-alt-msg);
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 10px;
  text-align: center;
  font-weight: 500;
  background: rgba(217, 83, 79, .92);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  pointer-events: none;
  z-index: 20;
}

/* ------------------------------------------------------------------
   Image action dropdowns (the three-dot "kebab" menu on a product/image).
   When such a menu offers only ONE option (most commonly "Remove"), hide the
   kebab toggle and the text label, leaving ONLY the action's icon visible
   (e.g. just the trash can icon). No white box / dropdown menu is shown.
   The icon is centered in the action area.

   .mp-single-option-action         -> explicit class on the dropdown
                                       (reliable, works without :has support).
   .dropdown.img_action             -> catch-all for any single-option
                                       image-action menu (modern browsers
                                       with :has support).

   Multi-option menus keep their normal dropdown behaviour because the rule is
   guarded by li:only-child.
------------------------------------------------------------------- */
.mp-single-option-action > a.icon-menu[data-toggle='dropdown'],
.dropdown.img_action:has(ul.dropdown-menu > li:only-child) > a.icon-menu[data-toggle='dropdown'] {
    display: none !important;
}

.mp-single-option-action,
.dropdown.img_action:has(ul.dropdown-menu > li:only-child) {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.mp-single-option-action > ul.dropdown-menu,
.dropdown.img_action:has(ul.dropdown-menu > li:only-child) > ul.dropdown-menu {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transform: none !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mp-single-option-action > ul.dropdown-menu > li,
.dropdown.img_action:has(ul.dropdown-menu > li:only-child) > ul.dropdown-menu > li {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.mp-single-option-action > ul.dropdown-menu > li > a,
.dropdown.img_action:has(ul.dropdown-menu > li:only-child) > ul.dropdown-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    text-align: center !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: 0 !important;
}

.mp-single-option-action > ul.dropdown-menu > li > a > i,
.dropdown.img_action:has(ul.dropdown-menu > li:only-child) > ul.dropdown-menu > li > a > i {
    display: inline-block !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

.mp-single-option-action > ul.dropdown-menu > li > a > span,
.dropdown.img_action:has(ul.dropdown-menu > li:only-child) > ul.dropdown-menu > li > a > span,
.mp-single-option-action > ul.dropdown-menu > li > a > .remove-text,
.dropdown.img_action:has(ul.dropdown-menu > li:only-child) > ul.dropdown-menu > li > a > .remove-text {
    display: none !important;
}

/* ------------------------------------------------------------------
   SET AS DRAFT buttons (seller + admin) — consistent good design with
   theme color, rounded corners, and hover effect.
------------------------------------------------------------------- */
.mp-draft-btn {
    background-color: #58C95E !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mp-draft-btn:hover {
    background-color: #4bb550 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

#admin_set_draft_status_btn {
    margin-left: 0 !important;
}