.lbaic-settings-mp-popup {
  --lbaic-settings-popup-color: var(--lbaic-settings-mp-popup-color);
  --lbaic-settings-mp-popup-i-color: #828282;
  // Descriptions
  --lbaic-settings-desc-in-fs: var(--lbaic-settings-fs-10);
  --lbaic-settings-desc-in-lh: var(--lbaic-settings-lh-12);
  --lbaic-settings-desc-in-mbs: 2px;

  &-i {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    stroke: var(--lbaic-settings-mp-popup-i-color);
    transition: stroke 300ms ease-in-out;
  }

  &-pic {
    width: 46px;
    height: auto;
  }

  &-icon {
    width: 52px;
    height: 60px;
    color: var(--lbaic-settings-primary);
  }

  &-ck {
    margin-block-end: 24px;
  }

  &-objects {
    margin-block-end: 24px;
  }

  &-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    &:not(:last-child) {
      margin-block-end: 24px;
    }

    @include max-width($lbaic-settings-wp-breakpoint) {
      flex-direction: column;
    }

    &-in {
      &:hover {
        --lbaic-settings-popup-bg-color: var(--lbaic-settings-radio-modern-hover-bg);
        --lbaic-settings-popup-color: var(--lbaic-settings-button-primary-bg);
        --lbaic-settings-mp-popup-i-color: var(--lbaic-settings-button-primary-bg);
      }

      &.active {
        --lbaic-settings-popup-bg-color: var(--lbaic-settings-radio-modern-active-bg);
        --lbaic-settings-popup-color: var(--lbaic-settings-button-primary-bg);
        --lbaic-settings-mp-popup-i-color: var(--lbaic-settings-button-primary-bg);
      }
    }

    &-item {
      position: relative;
      max-width: 452px;
      height: 76px;
      min-height: 76px;
      justify-content: center;
      margin-block-end: 8px;
      padding-block: 10px;
      padding-inline: 14px;
      display: flex;
      align-items: center;
      background-color: var(--lbaic-settings-popup-bg-color, transparent);
      border: 1px solid var(--lbaic-settings-input-border);
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 300ms ease-in-out, border 300ms ease-in-out;

      @include min-width($lbaic-settings-wp-breakpoint) {
        height: auto;
      }

        &-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        z-index: 1;
      }

      &-badge-icon {
        position: absolute;
        bottom: 4px;
        left: 4px;
        z-index: 1;
        width: 16px;
        height: 16px;

        &-woocommerce {
          opacity: 0.3;
          transition: opacity 0.2s ease-out;
        }
      }

      &:hover &-badge-icon-woocommerce {
        opacity: 1;
      }

      &.personalize {
        min-height: 85px;
        padding-inline: 56px;
        background-color: transparent;
      }
    }

    &-label {
      display: block;
      font-size: var(--lbaic-settings-fs-12);
      font-weight: var(--lbaic-settings-fw-400);
      color: var(--lbaic-settings-popup-color);
      text-align: center;
      transition: color 300ms ease-in-out;
    }
  }

  &-object {
    &-content {
      width: 100%;
      display: block;
    }

    & {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      &:first-child {
        margin-block-start: 10px;
      }

      &:not(:last-child) {
        margin-block-end: 20px;
      }
    }

    &-title {
      &:not(:last-child) {
        padding-block-end: 10px;
      }

      &-in {
        font-size: var(--lbaic-settings-fs-14);
        font-weight: var(--lbaic-settings-fw-700);
        color: var(--lbaic-settings-mp-popup-color);
      }
    }

    &-in {
      width: 100%;
      max-width: 30%;
      display: flex;
      align-items: center;
      gap: 8px;

      .lbaic-settings-checkbox-label {
        font-size: var(--lbaic-settings-fs-14);
        font-weight: var(--lbaic-settings-fw-400);
        line-height: var(--lbaic-settings-lh-20);
        color: var(--lbaic-settings-mp-popup-checkbox-color);
      }
    }

    &-actions {
      position: relative;

      .lbaic-settings-badge {
        position: absolute;
        top: -8px;
        right: -7px;
        --lbaic-settings-badge-pi-start: 3px;
        --lbaic-settings-badge-pi-end: 3px;
        --lbaic-settings-badge-height: 16px;
        min-width: 16px;
        --lbaic-settings-badge-bg: var(--lbaic-settings-primary);
        --lbaic-settings-badge-color: var(--lbaic-settings-white);

        &-label {
          font-size: 10px;
        }
      }

      &:hover {
        --lbaic-settings-mp-popup-button: var(--lbaic-settings-button-bg-hover);
      }
    }
  }

  &-desc {
    display: flex;
    gap: 8px;
    align-items: center;

    &:not(:last-child) {
      margin-block-end: 10px;
    }

    &-in {
      font-size: var(--lbaic-settings-fs-12);
      font-weight: var(--lbaic-settings-fw-500);
      color: var(--lbaic-settings-popup-color);
    }
  }

  &-divider {
    margin-inline: 0;
    margin-block: 24px;
    height: 2px;
    background-color: var(--lbaic-settings-primary);
  }

  &-table {
    &-header {
      &-checkbox {
        width: 30px;
      }
    }

    &-body {
      &-title {
        &-label {
          max-width: 380px;
          word-break: break-word;
          white-space: normal;
        }
      }
    }
  }

  .lbaic-settings-popup-header {
    &-desc {
      font-size: var(--lbaic-settings-fs-12);
      font-weight: var(--lbaic-settings-fw-400);
    }
  }

  &-button {
    width: 24px;
    height: 24px;
    display: flex;
    border-radius: 3px;
    background-color: var(--lbaic-settings-mp-popup-button, transparent);

    .lbaic-settings-tooltip-i {
      width: 16px;
      height: 16px;
      margin: auto;
    }
  }

  &-content {
    .lbaic-settings-table-card-kb-items {
      .lbaic-settings-table-card {
        --lbaic-settings-table-card-grid: 1fr minmax(100px, auto) minmax(100px, auto) minmax(90px, auto);
        --lbaic-settings-table-card-grid-details-columns: 1 / 5;
      }
    }
  }

  &-steps-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;

    @include min-width($lbaic-settings-wp-breakpoint) {
      flex-direction: row;
    }
  }

}

.lbaic-settings-mp-sp-popup {
  .lbaic-settings-table-card-body-input-link {
    width: max-content;
  }
}