@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');

.monogram-modal-holder {
  display: none;
  padding: 0 0 24px;
  @media(min-width: 990px) {
    padding: 0 6%;
  }
  @media(min-width: 1200px) {
    padding: 0 14%;
  }
}

.product.show-monogram .monogram-container {
  position: unset;
  display: flex !important;
}

.monogram-modal-holder.is-visible {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: max-content;
  background: #FFF;
  z-index: 999;
}

.product.show-monogram {
  height: var(--product-container-height, 100dvh);
  overflow: hidden;
  position: relative;
}

.close-monogram-modal {
  display: none;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  margin: 5px 0;
  padding: 8px 0;
  color: #212121;
  font-family: Gotham;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  @media(min-width: 990px) {
    display: inline-flex;
  }
}

.jtbc-product-title__mobile-holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0;
  @media(min-width: 990px) {
    display: none;
  }
  .close-monogram-modal-mobile {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
  }
  .jtbc-product-title__mobile {
    color: #212121;
    font-family: "Libre Bodoni";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: none;
    &::before {
      content: "Personalize your ";
      font-weight: 400;
      color: #212121;
      font-family: "Libre Bodoni";
      font-size: 22px;
      font-style: normal;
      line-height: normal;
      letter-spacing: 1px;
    }
  }
}

#jtbconfigurator {
  #jtbcustomizer {
    padding: 0;
    .jtbc-wrapper {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      gap: 16px;
      @media(min-width: 990px) {
        flex-direction: row;
        gap: 32px;
      }
      &::after {
        content: none;
      }
      .jtbc-preview-panel {
        flex: 1;
        width: 100%;
        @media(min-width: 990px) {
          width: auto;
          flex: 60%;
        }
        .jtbc-info-wrapper__mobile {
          display: none;
        }
        .jtbc-preview-container {
          height: 100%;
          margin: 0;
          .jtbc-primary-preview-container {
            max-height: 700px;
            margin: 0;
            .jtbc-primary-preview-wrapper {
              max-height: 700px;
              .jtbc-primary-preview {
                max-height: 700px;
                opacity: 1 !important;
              }
              .jtbc-primary-preview__zoom {
                display: none !important;
              }
            }
          }
          .jtbc-thumbnail-wrapper {
            display: none;
          }
        }
      }
      .jtbc-data-panel {
        flex: 1;
        display: flex;
        @media(min-width: 990px) {
          flex: 40%;
          padding: 0 calc(calc(40% - 400px) / 2);
        }
        flex-direction: column;
        .jtbc-menu-panel {
          width: 100%;
          margin: 0;
          .jtbc-info-wrapper {
            .jtbc-product-title {
              color: #212121;
              font-family: "Libre Bodoni";
              font-size: 22px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              letter-spacing: 1px;
              text-transform: none;
              margin-bottom: 28px;
              display: none;
              @media(min-width: 990px) {
                display: block;
              }
              &::before {
                content: "Personalize your ";
                font-weight: 400;
                color: #212121;
                font-family: "Libre Bodoni";
                font-size: 22px;
                font-style: normal;
                line-height: normal;
                letter-spacing: 1px;
              }
            }
            .jtbc-product-price-container, .jtbc-product-note {
              display: none;
            }
          }
          .jtbc-menu-wrapper {
            border: none;
            padding: 0;
            .jtbc-progress-bar {
              display: flex;
              gap: 8px;
              margin-bottom: 8px;
              .jtbc-progress-bar-segment {
                flex: 1;
                height: 4px;
                border-radius: 8px;
                background: #DCDCDC;
                display: block;
                &.jtbc-progress-bar-segment--active {
                  background: #000000;
                }
              }
            }
            .jtbc-menu-container {
              position: relative;

              .jtbc-menu-header {
                display: none;
              }
              .jtbc-menu-body {
                min-height: auto !important;
                .jtbc-menu-tab {
                  display: none;
                }
                .jtbc-menu-tab-pane {
                  padding: 0;
                  width: 100%;
                  position: unset;
                  .jtbc-menu-element {
                    margin: 0;
                    .jtbc-decision-selector {
                      display: flex;
                      flex-direction: column;
                    }
                    .jtbc-menu-element__label {
                      display: flex;
                      align-items: center;
                      text-align: center;
                      justify-content: center;
                      gap: 10px;
                      color: #212121;
                      font-family: Gotham;
                      font-size: 14px;
                      font-style: normal;
                      font-weight: 400;
                      line-height: 20px;
                      letter-spacing: 0.65px;
                      text-transform: none;
                      --step-number: attr(data-step);
                      padding: 7px 0;
                      margin: 0 0 16px;
                      @media(min-width: 990px) {
                        margin: 0 0 20px;
                      }
                      &.hide {
                        display: none;
                      }
                      &::before {
                        content: var(--step-number);
                        color: #212121;
                        font-family: Gotham;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 20px;
                        letter-spacing: 0.65px;
                        text-transform: uppercase;
                      }
                    }
                    .jtbc-embroidery-steps-wrapper {
                      .jtbc-embroidery-step {
                        margin: 0;
                        display: flex;
                        flex-direction: column;
                        --step-number: attr(data-step);
                        .jtbc-menu-element__sub_label {
                          display: flex;
                          align-items: center;
                          text-align: center;
                          justify-content: center;
                          gap: 10px;
                          color: #212121;
                          font-family: Gotham;
                          font-size: 14px;
                          font-style: normal;
                          font-weight: 400;
                          line-height: 20px;
                          letter-spacing: 0.65px;
                          text-transform: none;
                          padding: 7px 0;
                          margin: 0 0 16px;
                          @media(min-width: 990px) {
                            margin: 0 0 20px;
                          }
                          &::before {
                            content: var(--step-number);
                            color: #212121;
                            font-family: Gotham;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 20px;
                            letter-spacing: 0.65px;
                            text-transform: uppercase;
                          }
                        }
                        .jtbc-menu-element__sub_info {
                          color: #212121;
                          font-family: Gotham;
                          font-size: 12px;
                          font-style: normal;
                          font-weight: 400;
                          line-height: 18.2px;
                          margin-bottom: 16px;
                        }
                        .jtbc-embroidery-step-content {
                          .jtbc-input-text {
                            .jtbc-input-text-line {
                              display: flex;
                              flex-direction: column;
                              margin: 0;
                              .jtbc-input-text-error {
                                order: 3;
                                margin-top: 4px;
                              }
                              .jtbc-character-limit-error {
                                order: 1;
                                display: flex;
                                margin-bottom: 4px;
                                align-items: center;
                                justify-content: space-between;
                                gap: 16px;
                                color: #63666A;
                                font-family: Gotham;
                                font-size: 12px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: normal;
                                letter-spacing: 0.65px;
                                text-transform: capitalize;
                                &::before {
                                  content: "Characters";
                                  color: #212121;
                                  font-family: Gotham;
                                  font-size: 12px;
                                  font-style: normal;
                                  font-weight: 400;
                                  line-height: normal;
                                  letter-spacing: 0.65px;
                                  text-transform: capitalize;
                                }
                              }
                              .jtbc-input-text__input {
                                order: 2;
                                padding: 16px;
                                gap: 10px;
                                width: 100%;
                                border: 1px solid #747474;
                                color: #212121;
                                font-family: Gotham;
                                font-size: 18px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 18.2px;
                                border-radius: 0;
                                letter-spacing: 0.65px;
                                margin: 0;
                                box-shadow: none !important;
                                &:focus {
                                  outline: none;
                                  border: 1px solid #000;
                                }
                              }
                            }
                          }
                          .jtbc-embroidery-color-wrapper {
                            .jtbc-embroidery-color__label {
                              color: #212121;
                              font-family: Gotham;
                              font-size: 12px;
                              font-style: normal;
                              font-weight: 500;
                              text-align: center;
                              margin-bottom: 8px;
                              &:not(.show) {
                                display: none;
                              }
                            }
                            .jtbc-attribute-selector {
                              .jtbc-attribute-wrapper {
                                gap: 8px;
                                justify-content: center;
                                .jtbc-attribute-item {
                                  width: calc(16.66% - 6.66px);
                                  aspect-ratio: 1;
                                  background-size: auto;
                                  padding: 4px;
                                  border-radius: 100px;
                                  border: 1px solid #EEE;
                                  background: content-box;
                                  @media(min-width: 400px) {
                                    width: calc(14.28% - 6.85px);
                                  }
                                  span {
                                    display: none;
                                  }
                                  &.jtbc--selected {
                                    border: 2px solid #000;
                                  }
                                }
                              }
                            }
                          }
                          .jtbc-attribute-selector {
                            .jtbc-attribute-wrapper {
                              display: flex;
                              flex-wrap: wrap;
                              gap: 8px;
                              .jtbc-attribute-item {
                                background-size: 80%;
                                background-position: center;
                                background-repeat: no-repeat;
                                background-blend-mode: multiply;
                                aspect-ratio: 1;
                                margin: 0;
                                padding: 0;
                                box-shadow: none;
                                border-radius: 6px;
                                border: 1px solid #EEE;
                                background-color: #F7F7F7;
                                width: calc(33.33% - 5.33px);
                                &.jtbc--selected {
                                  border: 2px solid #000;
                                }
                                &:not(.jtbc--selected):hover {
                                  transform: none;
                                }
                                &.span-title {
                                  overflow: hidden;
                                  position: relative;
                                  background-position: top;
                                  span {
                                    color: #212121;
                                    text-align: center;
                                    font-family: Gotham;
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: normal;
                                    letter-spacing: 0.65px;
                                    text-transform: capitalize;
                                    padding: 4px 10px;
                                    background: #fff;
                                    position: absolute;
                                    bottom: 0;
                                    width: 100%;
                                    left: 0;
                                  }
                                }
                              }
                            }
                          }
                        }
                        .jtbc-menu-element__sub_info {
                          color: #212121;
                          font-family: Gotham;
                          font-size: 12px;
                          font-style: normal;
                          font-weight: 400;
                          line-height: 18.2px;
                          margin: 16px 0 0;
                          order: 4;
                        }
                      }
                    }
                    .jtbc-radio-buttons-group {
                      display: flex;
                      gap: 8px;
                      justify-content: flex-start;
                      flex-wrap: wrap;
                      .jtbc-radio-button {
                        width: calc(33.33% - 5.33px);
                        label {
                          height: 100%;
                          margin: 0;
                          padding: 0;
                          & > *:not(.jtbc-radio-data) {
                            display: none;
                          }
                          .jtbc-radio-data {
                            height: 100%;
                            color: #212121;
                            text-align: center;
                            font-family: Gotham;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                            letter-spacing: 0.65px;
                            text-align: center;
                            text-transform: capitalize;
                            border-radius: 6px;
                            border: 1px solid #EEE;
                            background: #FFF;
                            padding: 6px 8px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            min-height: 70px;
                            @media (min-width: 990px) {
                              min-height: initial;
                            }
                          }
                          input:checked + .jtbc-radio-data {
                            border: 2px solid #000;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            .jtbc-back-button {
              position: absolute;
              left: 0;
              top: 12px;
              z-index: 1;
              .jtbc-back-button-item {
                padding: 0;
                background: transparent;
                border: none;
                outline: none;
                cursor: pointer;
                width: 34px;
                height: 34px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
              }
              &.hide {
                display: none;
              }
            }
            .jtbc-step-button {
              margin-top: 16px;
              @media(min-width: 990px) {
                margin-top: 27px;
              }
              &.hide {
                display: none;
              }
              .jtbc-step-button-item {
                display: flex;
                height: 44px;
                padding: 16px 32px;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                width: 100%;
                border: 1px solid #38393A;
                background: #38393A;
                color: #FFF;
                text-align: center;
                font-family: "Open Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 700;
                line-height: 14px;
                cursor: pointer;
                letter-spacing: 2px;
                text-transform: uppercase;
                transition: 0.3s all ease-in-out;
                &:disabled {
                  opacity: 0.2;
                  pointer-events: none;
                }
              }
            }
          }
          .jtbc-actions {
            display: none;
            gap: 20px;
            padding-top: 22px;
            margin-top: 16px;
            @media(min-width: 990px) {
              margin-top: 27px;
            }
            &.is-visible {
              display: flex;
            }
            .jtbc-quantity {
              width: 120px;
              min-width: 120px;
              border: 1px solid #212121;
              justify-content: space-between;
              &::before {
                content: "Quantity";
                display: block;
                color: #212121;
                font-family: 'Open Sans', sans-serif;
                font-size: 12px;
                font-style: normal;
                line-height: 1;
                font-weight: 400;
                line-height: normal;
                letter-spacing: 0.65px;
                position: absolute;
                top: -22px;
                left: 0;
              }
              .jtbc-button, .jtbc-input {
                border: none;
                box-shadow: none;
                height: auto;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
            .jtbc-cart-button {
              display: flex;
              height: 47px;
              padding: 16px 32px;
              justify-content: center;
              align-items: center;
              flex: 1;
              margin: 0;
              border: 1px solid #38393A;
              background: #38393A;
              color: #FFF;
              text-align: center;
              font-family: "Open Sans";
              font-size: 12px;
              font-style: normal;
              font-weight: 700;
              line-height: 14px;
              letter-spacing: 2px;
              text-transform: uppercase;
            }
          }
        }
        & > .jtbc-actions {
          display: none;
        }
      }
    }
  }
}