@use "_theme.scss";

:root {
  --margin-xl: 35px;
  --margin-lg: 25px;
}

html.modal-open {
  overflow: hidden;
}

body.modal-open {
  padding-right: unset !important;
}

.kit-product {
  --right-side-width-xl: 1120px;
  --right-side-width-lg: 800px;
  --carousel-height: 60vh;



  .root-preview {
    @media (max-width: theme.$lg) {
      .preview-wrapper {
        background-color: #fff;
        .carousel-root {
          height: var(--product-preview-area-height);
        }

        .dot-carousel-wrapper .dot-carousel {
          margin-top: 5px;
        }
      }
    }

    @media (min-width: theme.$lg) {
      padding: 80px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .carousel-root {
        background-color: #fff;
      }
      .preview-wrapper {
        height: 100%;
      }
    }
  }

  .main-carousel-wrapper {
    max-height: 65vh;
  }

  .carousel-root {
    background-color: var(--color-fill);
    .image-wrapper {
      @media(max-width: theme.$lg) {
        background-color: var(--color-fill);
        padding: 20px;
      }
    }
  }

  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .main {
    display: grid;
    grid-template-columns: calc(100vw - var(--right-side-width-xl)) var(--right-side-width-xl);

    @media (min-width: theme.$lg) and (max-width: theme.$xl) {
      grid-template-columns: calc(100vw - var(--right-side-width-lg)) var(--right-side-width-lg);
    }

    @media (max-width: theme.$lg) {
      grid-template-columns: 100%;
    }
  }

  .fixed-size-right {
    background-color: #fff;
    position: relative;
    padding-top: 38px;
    min-height: calc(100vh - var(--header-height-desktop));

    @media (min-width: theme.$lg) and (max-width: theme.$xl) {
      width: var(--right-side-width-lg);
      min-height: calc(100vh - var(--header-height-desktop));
    }
    @media (max-width: theme.$lg) {
      width: 100%;
      min-height: unset;
      padding-top: 30px;
    }
    @media (min-width: theme.$xl) {
      padding-left: 130px;
      padding-right: 160px;
      padding-bottom: 135px;
    }

    @media (max-width: theme.$xl) {
      padding-left: 67px;
      padding-right: 67px;
      padding-bottom: 135px;
    }

    @media (max-width: theme.$lg) {
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: 10px;
      padding-bottom: 100px;
    }

    @media (max-width: theme.$md) {
      padding-bottom: 180px;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: initial;
    }

    .right-side-loading-container {
      position: absolute;
      top: 0;
      right: 0;
      width: var(--right-side-width-xl);
      height: calc(100% - var(--header-height-desktop));
      background-color: rgba(255, 255, 255, 0.8);
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .loading-content-container {
        position: fixed;
        top: 50%;
      }

      .reorder-loading-msg {
        font-size: var(--text-size-regular);
        color: var(--text-color-dark);
        text-align: center;
        width: 290px;
        padding-bottom: 20px;
      }

      .loading-dots {
        transform: scale(1.2, 1.2);
        display: block;
        margin: auto;
        height: 14px;

        > div {
          background: var(--color-highlight);
        }
      }

      @media (max-width: theme.$xl) {
        width: var(--right-side-width-lg);
      }

      @media (max-width: theme.$lg) {
        width: 100%;
        position: fixed;
      }
    }

    .kit-name {
      margin-bottom: 35px;
      font-size: var(--text-size-h2);
      color: var(--text-color-heading);

      @media (width < theme.$md + 1) {
        margin-bottom: 30px;
      }

      @media (max-width: theme.$sm) {
        font-size: var(--text-size-h4);
      }
    }

    .kit-reorder {
      background-color: var(--color-fill);
      font-size: var(--text-size-regular);
      color: var(--text-color-dark);
      padding: 9px 10px;
      margin-bottom: 30px;

      .reorder-link {
        font-size: var(--text-size-regular);
        color: var(--color-highlight);
        cursor: pointer;
        padding-left: 7px;
      }
    }

    .kit-includes-title {
      font-size: var(--text-size-h4);
    }

    .kit-description {
      display: block;
      margin-top: 35px;
      color: var(--text-color-medium);
      font-size: var(--text-size-regular);

      @media (max-width: theme.$lg) {
        margin-top: 15px;
        margin-bottom: 40px;
      }

      @media (max-width: theme.$md) {
        margin-top: initial;
        margin-bottom: 30px;
      }
    }

    .carousel-wrapper {
      height: auto;

      @media (min-width: theme.$sm) and (max-width: theme.$md) {
        height: 520px;
      }

      @media (min-width: theme.$xs) and (max-width: theme.$sm) {
        height: 320px;
      }

      img {
        max-height: 640px;
        max-width: 100%;
        object-fit: contain;

        @media (min-width: theme.$sm) and (max-width: theme.$md) {
          max-height: 460px;
          max-width: 100%;
          object-fit: contain;
        }

        @media (min-width: theme.$xs) and (max-width: theme.$sm) {
          max-height: 260px;
          max-width: 100%;
          object-fit: contain;
        }
      }

      .image .animated.loading {
        width: calc(100vw - 80px);
        height: 640px;
        @media (min-width: theme.$sm) and (max-width: theme.$md) {
          width: calc(100vw - 50px);
          height: 460px;
        }

        @media (min-width: theme.$xs) and (max-width: theme.$sm) {
          width: calc(100vw - 50px);
          height: 260px;
        }
      }
    }

    .quantity-wrapper {
      display: inline-flex;
      flex-direction: column;
    }

    .kit-quantity {
      display: block;
      margin-top: 33px;
      font-size: var(--text-size-label);
      color: var(--text-color-ultra-dark);

      @media (max-width: theme.$lg) {
        margin-top: 61px;
      }

      @media (max-width: theme.$md) {
        margin-top: initial;
      }

      > div {
        margin-left: 15px;
      }
    }

    .input-quantity {
      height: 30px;
      width: 90px;
      border: 1px solid var(--color-line);
      border-radius: 5px;
      margin-left: 15px;
      padding: 0 20px;
    }

    .quantity-error {
      margin-top: 5px;
      color: var(--color-error);
      font-size: var(--text-size-fineprint);
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .divider {
      height: 2px;
      background-color: var(--color-line);
      margin-bottom: 30px;
      margin-top: 34px;

      @media (width < theme.$md) {
        margin-top: 30px;
      }
    }

    .kit-item-list-wrapper {
      margin-top: 31px;

      @media (width < theme.$md) {
        margin-top: 30px;
      }

      .list-loader {
        position: relative;
        min-width: 100%;
        min-height: 50vh;

        @media (max-width: theme.$lg) {
          min-height: 100px;
        }

        .loading-dots {
          position: absolute;
          top: 30px;
          div {
            background: var(--color-highlight);
          }
        }
      }
    }

    .sticky-price-panel {
      box-shadow: 9px -3px 20px 0 rgba(0, 0, 0, 0.12);
      position: absolute;
      bottom: 0;
      height: 80px;
      width: 100%;
      padding-left: 130px;
      padding-top: 18px;
      padding-right: 160px;
      background-color: white;
      left: 0;
      z-index: 9;

      &.fixed {
        @media (min-width: theme.$xl) {
          position: fixed;
          width: var(--right-side-width-xl);
          left: calc(100vw - var(--right-side-width-xl));
        }

        @media (min-width: theme.$lg) and (max-width: theme.$xl) {
          position: fixed;
          width: var(--right-side-width-lg);
          left: calc(100vw - var(--right-side-width-lg));
        }
      }

      @media (max-width: theme.$xl) {
        padding-left: 67px;
        padding-right: 80px;
        margin-top: 30px;
      }

      @media (max-width: theme.$lg) {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: unset;
        position: fixed;
      }

      @media (max-width: theme.$md) {
        height: unset;
        margin-top: unset;
        padding-top: 10px;
      }

      .button {
        margin: 0;
        width: 196px;
        float: right;
        height: 45px;

        @media (max-width: theme.$lg) {
          width: 280px;
        }

        @media (max-width: theme.$md) {
          float: left;
          margin-top: 10px;
          margin-bottom: 10px;
          width: 100%;
          height: 35px;
        }
      }

      .total-price {
        float: left;
        color: var(--color-highlight);
        margin: 5px 0;
        font-size: var(--text-size-h4);
        position: relative;
        min-height: 20px;

        .loading-dots {
          position: absolute;
          top: 5px;
          div {
            background: var(--color-highlight);
          }
        }

        .price-display {
          display: flex;
          flex-direction: column;
          align-items: unset;

          .minimum-price-notation {
            color: var(--text-color-medium);
            font-size: var(--text-size-fineprint);
            margin-right: 5px;

            @media (max-width: theme.$md) {
              font-size: var(--text-size-regular);
            }
          }

          @media (max-width: theme.$md) {
            flex-direction: row;
            align-items: center;
          }
        }

        @media (max-width: theme.$md) {
          float: unset;
          margin: unset;
          display: block;
          line-height: 1;
        }
      }

      .continue-button {
        display: flex;
        align-items: center;
        justify-content: center;
        .loading-dots {
          height: 12px;
        }
      }
    }
  }
}

.continue-popover .popover {
  border-color: var(--color-line);
  font-family: inherit;

  .popover-body {
    padding: 0;
    font-size: var(--text-size-regular);

    .continue-popover-message {
      padding: 25px;
      color: var(--text-color-medium);
    }
  }
}

.continue-popover.warning.show .popover {
  max-width: 320px;
  // height: 194px;

  @media (min-width: theme.$lg) {
    max-width: 350px;
  }

  .continue-popover-message {
    border-bottom: 1px solid var(--color-line);
  }

  .popover-buttons {
    display: flex;
    flex-direction: row;
    height: 79px;
    align-items: center;
    padding: 25px;

    .btn-popover-continue {
      min-width: 170px;
      cursor: pointer;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin-left: 10px;
      flex-grow: 1;

      @media (min-width: theme.$lg) {
        min-width: 200px;
      }
    }

    .btn-popover-cancel {
      color: var(--color-highlight);
      cursor: pointer;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      min-width: 45px;
    }
  }
}

.continue-popover.error.show .popover{
  max-width: 320px;
  @media (min-width: theme.$md) {
    max-width: 300px;
  }
  @media (min-width: theme.$xl) {
    max-width: 350px;
  }

  .popover-close {
    position: absolute;
    right: 12px;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-color-medium);
  }
}
