:root {
  --bulma-primary-h: 192deg;
  --bulma-primary-s: 97%;
  --bulma-primary-l: 55%;
  --bulma-info-h: 192deg;
  --bulma-info-s: 97%;
  --bulma-info-l: 55%;
  --bulma-success-s: 76%;
  --bulma-link-h: 203deg;
  --bulma-link-l: 36%;
  --bulma-danger-l: 49%;
  --bulma-family-primary: Roboto;
  --bulma-family-secondary: Ubuntu;
  --bulma-family-code: Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;
  --bulma-size-normal: 0.85rem;
  --bulma-weight-medium: 400;
  --bulma-weight-semibold: 400;
  --bulma-body-size: 0.85em;
  --bulma-body-family: Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial,
    sans-serif;
  --bulma-body-font-size: 0.85em;
}

body.wp-admin #wpbody-content {
  background: #f8fafc;
  padding: 24px 32px 120px;
  box-sizing: border-box;
}

body.wp-admin .wrap[class*="kmm"],
body.wp-admin .wrap[id^="kmm"],
body.wp-admin .wrap.kmm-admin-wrap {
  margin: 0;
  max-width: 1240px;
}

#wpcontent,
#wpbody,
#wpbody-content {
  padding-bottom: 120px;
}

/* Tabs styling */
.kmm-tabs {
  margin-bottom: 20px;
}
.kmm-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 8px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.kmm-tab-button {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background: transparent;
  margin: 0 4px;
  border-radius: 10px;
  font-weight: 600;
  color: #1e293b;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.kmm-tab-buttons li.bulma-is-active > .kmm-tab-button {
  background: linear-gradient(120deg, rgba(79, 70, 229, 0.14), rgba(59, 130, 246, 0.16));
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.35);
}
.kmm-tab-content {
  display: none;
  padding-top: 15px;
}
.kmm-tab-content.active {
  display: block;
}

/* Filter form styling */
.bulma-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
  padding: 24px;
}
.bulma-box label {
  display: block;

  font-weight: bold;
}
.bulma-box input[type="text"],
.bulma-box select {
  width: 100%;
  max-width: 300px;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 10px;
}
.kmm-filter-div {
  display: inline-flex;
  width: 70%;
  gap: 20px;
  flex-wrap: wrap;
  align-items: baseline;
}
@media (max-width: 600px) {
  .bulma-box input[type="text"],
  .bulma-box select {
    max-width: 100%;
  }
}

/* Quick Edit styling */
.kmm-quickedit-inline {
  background: #ffffff;
  padding: 16px;
  margin-top: 5px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.kmm-bulk-modal {
  background: #ffffff;
  padding: 24px;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-height: 70vh;
  overflow: auto;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
}
.kmm-replace-inline {
  background: #ffffff;
  padding: 16px;
  margin-top: 5px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Variations inline styling */
.kmm-variants-inline {
  width: 90%;
  background: #ececf4;
  padding: 25px;
  border-radius: 20px;
  float: left;
  position: absolute;
  left: 50px;
  top: 30px;
  padding-bottom: 50px;
  z-index: 9999;
  margin-bottom: 100px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
}
.kmm-variants-container {
  margin-bottom: 10px;
}
.kmm-variant-item {
  padding: 16px;
  margin: 6px 0;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.kmm-variant-url {
  width: 80%;
}
.kmm-variant-copy-url {
  margin-left: 10px;
}
.kmm-variant-code {
  width: 80%;
  margin-top: 4px;
}
.kmm-variant-copy-code {
  margin-left: 10px;
}
.kmm-variant-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.kmm-variant-download {
  font-size: 0.8em;
}
.kmm-icon-download,
.kmm-icon-copy {
  width: 16px;
  height: 16px;
}

.kmm-slider {
  width: 150px;
}
.bulma-box select {
  background: none;
  min-width: 150px;
}
.bulma-select:not(.bulma-is-multiple):not(.bulma-is-loading)::after {
  margin-top: 0px;
  right: 8%;
}

.widefat td {
  vertical-align: middle !important;
}
.kmm-no-scroll {
  overflow: hidden;
}
input[type="checkbox"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="datetime"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="radio"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
  outline: unset;
  border-color: hsl(
    var(--bulma-input-focus-h),
    var(--bulma-input-focus-s),
    var(--bulma-input-focus-l)
  );
  box-shadow: var(--bulma-input-focus-shadow-size)
    hsla(
      var(--bulma-input-focus-h),
      var(--bulma-input-focus-s),
      var(--bulma-input-focus-l),
      var(--bulma-input-focus-shadow-alpha)
    );
}
.kaige-checkbox input[type="checkbox"] {
  margin-top: 3px !important;
}
.kaige-checkbox {
  display: flex;
  gap: 5px;
}
.kaige-qe-box {
  height: 200px;
  overflow-y: scroll;
  padding-top: 5px;
  display: flex;
  gap: 0px !important;
  flex-direction: column;
}
@media screen and (max-width: 782px) {
  .kaige-checkbox input[type="checkbox"] {
    margin-top: 0px !important;
  }
  .kaige-qe-box {
    padding-top: 10px;
    display: flex;
    gap: 10px !important;
    flex-direction: column;
  }
}

/* Nested submenu styling */
.kmm-sub-submenu {
  display: none;
  margin-left: 10px;
  padding-left: 0;
}
.kmm-sub-submenu li > a {
  padding-left: 20px;
}
.kmm-has-sub.kmm-open > .kmm-sub-submenu,
.kmm-has-sub.wp-has-current-submenu > .kmm-sub-submenu {
  display: block;
}

/* Lightbox controls */
.kmm-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kmm-order-list li {
  background: #ffffff;
  border: 1px solid #d1d5db;
  padding: 10px 16px;
  margin-bottom: 6px;
  cursor: move;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.kmm-order-placeholder {
  background: #ddd;
  border: 1px dashed #aaa;
  height: 2em;
  margin-bottom: 4px;
}
.kmm-order-chosen {
  opacity: 0.6;
}

#kmm-notify-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#wpwrap {
  background: #f1f5f9;
}
#wpfooter {
  background: #f1f5f9;
  border-top: 1px solid #cbd5f5;
  position: static;
  padding: 18px 32px;
  box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.05);
}
.wp-core-ui select {
  background: none;
}
.bulma-pagination-previous,
.bulma-pagination-next,
.bulma-pagination-link,
.bulma-pagination-ellipsis,
.pagination-ellipsis,
.bulma-file-cta,
.bulma-file-name,
.bulma-select select,
.bulma-input,
.bulma-textarea,
.bulma-button {
  gap: 5px;
}
.basicLightbox--iframe .basicLightbox__placeholder,
.basicLightbox--img .basicLightbox__placeholder,
.basicLightbox--video .basicLightbox__placeholder {
  width: 80% !important;
  height: 80% !important;
  cursor: pointer !important;
}