.custom-product {
  .custom-product__container {
    max-width: var(--page-width);
    display: flex;
    flex-direction: column;
    gap: 20px;

    @media screen and (min-width: 1000px) {
      flex-direction: row;
      gap: 60px;
      padding-inline: 50px;
      margin: auto;
      justify-content: center;
    }
  }

  .image-container {
    position: relative;
    width: 100vw;

    @media screen and (min-width: 1000px) {
      width: 50%;
      max-width: 590px;
      position: sticky;
      top: 86px;
      height: fit-content;
    }

    .image-container__item {
      aspect-ratio: 375/387;
      display: contents;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      @media screen and (min-width: 1000px) {
        aspect-ratio: 590/660;
      }
    }

    .swiper-pagination {
      position: absolute;
      bottom: 24px;
      left: 50%;
      z-index: 1;
      width: 100%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 13px;

      @media screen and (min-width: 1000px) {
        display: none;
      }

      .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #CFCFCF;
        opacity: 1;
        transition: all 0.3s ease;

        &.swiper-pagination-bullet-active {
          background-color: var(--brand-color);
        }
      }
    }

    .main-slider {
      overflow: hidden;
      width: 100%;
      background-color: var(--brand-color-light);
      position: relative;

      .swiper-button-prev {
        display: none;
        position: absolute;
        left: 25px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;

        svg {
          border-radius: 100px;
          box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
        }

        @media screen and (min-width: 1000px) {
          display: block;
        }
      }

      .swiper-button-next {
        display: none;
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;

        svg {
          border-radius: 100px;
          box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
        }

        @media screen and (min-width: 1000px) {
          display: block;
        }
      }

      @media screen and (min-width: 1000px) {
        overflow: hidden;
        border-radius: 10px;
      }

      .swiper-wrapper {
        display: flex;
        width: fit-content;
      }
    }

    .thumbnails-slider {
      display: none;

      @media screen and (min-width: 1000px) {
        display: block;
        width: 100%;
        overflow: hidden;
        margin-top: 26px;

        .swiper-wrapper {
          display: flex;
          width: fit-content;

          .swiper-slide {
            width: 90px;
            aspect-ratio: 83/108;
            border-radius: 6px;
            border: 1.55px solid #F4DEDE;
            cursor: pointer;
            overflow: hidden;
            box-sizing: border-box;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            &.swiper-slide-thumb-active {
              border-color: var(--brand-color);
            }
          }
        }
      }
    }

    .badges-container {
      display: flex;
      gap: 6px;
      position: absolute;
      top: 24px;
      left: 24px;
      max-width: calc(100% - 48px);

      @media screen and (min-width: 1000px) {
        top: 26px;
        right: 26px;
        left: unset;
        gap: 10px;
        max-width: calc(100% - 52px);
      }

      .badges-container__item {
        padding: 6px 8px;
        display: flex;
        align-items: center;
        border-radius: 50px;
        font-weight: 700;
        font-size: 14px;
        line-height: 140%;
      }
    }

    ul {
      list-style: none;
      margin: 0;

      li {
        padding: 0;
      }
    }
  }

  .tooltip {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    background-color: var(--brand-color-light);
    border-radius: 10px;
    padding: 4px;

    .tooltip__title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      font-size: 14px;
      line-height: 140%;
      cursor: pointer;

      &:hover,
      &:focus-visible {
        ~.tooltip__message {
          display: block;
        }
      }
    }

    .tooltip__message {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      background: #000;
      border-radius: 6px;
      padding: 12px 18px;
      z-index: 1;
      font-size: 12px;
      display: none;
      color: #fff;
      width: 300px;
      text-align: center;
    }
  }

  .product-info-container {
    width: 100%;
    padding-inline: 15px;

    @media screen and (min-width: 1000px) {
      flex: 1;
      max-width: 550px;
      padding-inline: 0;
      position: sticky;
      top: 86px;
      height: fit-content;
    }

    .shopify-app-block:has(.ruk_rating_snippet) {
      margin-bottom: 24px;

      &:has(.ruk_rating_snippet:empty) {
        display: none;
      }
    }

    .subscribe-block {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .subscribe-block__title {
        font-weight: 700;
        font-size: 14px;
        line-height: 140%;
      }

      .subscribe-block__select {
        width: 100%;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 9999px;
        padding: 12px 18px;
        cursor: pointer;
        height: 50px;
        -moz-appearance: none;
        appearance: none;
        transition: border-color 0.3s ease;

        &:focus-visible {
          outline: none;
          border-color: var(--button-secondary);
        }
      }

      .subscribe-block__select-wrapper {
        position: relative;
        cursor: pointer;
        cursor: pointer;

        &:hover {
          .subscribe-block__select {
            border-color: var(--button-secondary);
          }
        }

        svg {
          position: absolute;
          right: 18px;
          top: 50%;
          transform: translateY(-50%) rotate(90deg);
          pointer-events: none;
        }
      }
    }

    .product-reviews-block {
      display: flex;
      gap: 8px;
      align-items: center;

      .product-reviews-block__title {
        font-size: 12px;
        line-height: 1.3;
      }

      img {
        max-width: 70px;
      }
    }

    .product-title {
      h1 {
        font-weight: 700;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0.03em;
        font-family: var(--heading-font-family);

        @media screen and (min-width: 1000px) {
          font-size: 36px;
        }
      }
    }

    .product-description p {
      font-weight: 300;
      font-size: 12px;
      line-height: 173%;
    }

    .product-price {
      .product-price__container {
        display: flex;
        align-items: center;
        gap: 4px;

        .price {
          font-weight: 700;
          font-size: 18px;
          line-height: 172%;
        }

        .compare-at-price {
          font-weight: 500;
          font-size: 16px;
          line-height: 193%;
          color: var(--text-tertiary);
        }

        .price-badge {
          margin-left: 8px;
          background: rgba(243, 42, 59, 0.15);
          border-radius: 50px;
          font-weight: 500;
          font-size: 12px;
          line-height: 130%;
          color: var(--brand-color-sale);
          padding: 3.5px 14px;
        }

        &:has(.compare-at-price) {
          .price {
            color: var(--brand-color-sale);
          }
        }
      }
      .price-description {
        margin-top: 6px;
        font-weight: 400;
        font-size: 12px;
        line-height: 130%;
        color: var(--text-tertiary);
      }
    }

    .advantages .advantages__container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      list-style: none;
      margin: 0;
      padding: 0;

      @media screen and (min-width: 1000px) {
        gap: 12px;
      }

      .advantages__item {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .advantages__item-text {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
      }
    }

    .image-block {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 12px;
      border-radius: 10px;
      background: var(--background-secondary);

      @media screen and (min-width: 1000px) {
        gap: 12px;
      }

      .image-block__image {
        width: 58px;
        min-width: 58px;
        height: 58px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          border-radius: 50%;
        }

        svg {
          position: absolute;
          bottom: 0;
          right: -6px;
        }
      }

      .image-block__title {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
      }
    }

    .accordion-group {
      display: flex;
      flex-direction: column;

      .accordion:first-child {
        border-top: none;
      }

      .accordion {
        border-color: var(--inputs-border);
      }

      .accordion__toggle {
        padding-block: 12px;

        .text-with-icon {
          font-weight: 700;
          font-size: 14px;
          line-height: 140%;
          color: #232936;
        }
      }
    }

    .configurator {
      display: flex;
      flex-direction: column;

      .configurator-payments {
        margin-top: 12px;

        @media screen and (max-width: 999px) {
          img {
            width: 100%;
          }
        }
      }

      .configurator-button-wrapper {
        width: 100%;
      }

      .qnt-buttons,
      .additional-options {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;

        .qnt-buttons__item {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 2px;
          height: 50px;
          flex: 1;
          align-items: center;
          justify-content: center;
          border: 1px solid #ddd;
          border-radius: 9999px;
          padding: 9px;

          @media screen and (min-width: 1000px) {
            height: 52px;
          }

          svg {
            position: absolute;
            top: -6px;
            right: 0px;
            opacity: 0;
            transition: opacity 0.3s ease;
          }

          &:has(input:checked) {
            border-color: var(--button-secondary);

            svg {
              opacity: 1;
            }
          }

          input {
            display: none;
          }

          span {
            font-weight: 400;
            font-size: 12px;
            line-height: 130%;
            text-align: center;
          }

          p {
            font-weight: 400;
            font-size: 12px;
            line-height: 130%;
            text-align: center;
            color: var(--states-success);
          }
        }

        .additional-options__item {
          display: flex;
          gap: 8px;
          flex: 1;
          align-items: center;
          justify-content: center;
          border: 1px solid #ddd;
          border-radius: 9999px;
          padding: 9px;
          border-color: var(--button-secondary);
          height: 50px;
          
          span {
            font-size: 14px;
            line-height: 140%;
            text-align: center;
            font-weight: 700;
          }
        }
      }

      .configurator-progress {
        .configurator-progress__wrapper {
          margin-bottom: 16px;
          border-radius: 5px;
          background: #e8e8e8;
          display: block;
          height: 4px;
          width: 100%;
          position: relative;
        }

        .configurator-progress__inner {
          display: flex;
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          border-radius: 5px;
          width: 50%;
          background: var(--states-success);
          transition: width 0.3s ease;
        }

        .progress-arrow {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 0;
        }

        .triangle {
          position: absolute;
          bottom: 0;
          left: 75%;
          transform: translate(50%, -100%);
          width: 12px;
          rotate: 180deg;
          height: 10.4px;
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          background: #e8e8e8;
          transition: background 0.15s ease;
        }

        &.configurator-progress--active {
          .triangle {
            background: var(--states-success);
          }
        }
      }

      .added-products:empty {
        display: none;
      }

      .added-products {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 16px;

        .atc-block {
          display: none;
        }

        .configurator-card__image {
          padding: 10px;
          border-radius: 50%;
          border: 1px solid rgba(109, 113, 117, 0.15);
          aspect-ratio: 1/1;
          height: 62px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .configurator-card__info {
          h3 {
            font-size: 15px;
            font-weight: 400;
          }

          .product-price__container .price,
          .product-price__container .compare-at-price {
            font-size: 15px;
          }
        }

        .added-product__remove {
          margin-left: auto;
          border-radius: 50%;
          border: 1px solid rgba(109, 113, 117, 0.15);
          padding: 4px;
          cursor: pointer;
        }

        .added-product {
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }

      .real-submit {
        display: none;
      }

      &:has(.added-product) {
        .fake-submit {
          display: none;
        }

        .real-submit {
          display: block;
        }
      }
    }

    .date-picker {
      opacity: 0;
      display: flex;

      &.initialized {
        opacity: 1;
        transition: opacity 0.3s ease;
        align-items: center;
        justify-content: center;
        width: 100%;
        border: 1px solid var(--button-secondary);
        border-radius: 50px;
        height: 50px;
        overflow: hidden;
      }

      .open-modal {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        &.active {
          background: var(--button-secondary);

          svg {
            path {
              fill: #fff;
            }
          }
        }
      }

      .active-dates {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;

        .date-quick-select {
          border-right: 1px solid var(--button-secondary);
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          &.active {
            background: var(--button-secondary);
            color: #fff;
          }

          span {
            font-weight: 800;
            font-size: 13px;
            line-height: 135%;
            text-align: center;
          }
        }
      }
    }
  }

  .buy-button {
    product-form .shopify-product-form {
      display: flex;
      gap: 12px;

      quantity-selector  {
        border-radius: 9999px;
        border-color: var(--inputs-border);
        height: 50px;
        display: flex;
        align-items: center;
        width: 90px;
        justify-content: space-between;
        padding: 0 10px;

        @media screen and (min-width: 1000px) {
          width: 110px;
          padding: 0 12px;
        }

        input {
          font-weight: 700;
          min-width: 24px;
        }
      }

      .buy-buttons {
        flex: 1;

        .configurator-button-wrapper {
          width: 100%;
        }
      }
    }

    .configurator-payments {
      margin-top: 12px;

      @media screen and (max-width: 999px) {
        img {
          width: 100%;
        }
      }
    }
  }
}

.configurator-modal,
.text-editor-modal,
.date-picker-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(63, 63, 63, 0.45);
  z-index: 1000;

  &.active {
    display: block;
  }

  .configurator-modal__wrapper,
  .text-editor-modal__wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    background: var(--background-accent);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    @media screen and (min-width: 1000px) {
      max-width: 790px;
      max-height: 90vh;
      border-radius: 10px;
    }

    .configurator-modal__head,
    .text-editor-modal__head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 12px;

      @media screen and (min-width: 1000px) {
        padding: 16px 40px;
      }

      .icon-configurator-close {
        cursor: pointer;
      }
    }

    .configurator-modal__title,
    .text-editor-modal__title {
      font-weight: 700;
      font-size: 18px;
      line-height: 140%;
    }

    .configurator-modal__content,
    .text-editor-modal__content {
      flex: 1;
      background: #fff;
      max-height: 100%;
      position: relative;
      display: contents;

      &:has(.empty-error) {
        .empty-error-message {
          display: block;
        }
      }

      &:has(.length-error) {
        .length-error-message {
          display: block;
        }
      }
    }

    .text-editor-modal__content {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;

      @media screen and (min-width: 1000px) {
        padding: 40px;
        gap: 16px;
      }
    }

    .text-editor-modal__select-wrapper {
      position: relative;
      width: 100%;
    }

    .text-editor-modal__icon {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    .text-editor-modal__select {
      width: 100%;
      border: 1px solid #dbdcdd;
      border-radius: 9999px;
      padding: 24px 20px 9px;
      font-weight: 400;
      font-size: 14px;
      line-height: 140%;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      cursor: pointer;

      &:focus-visible {
        outline: none;
      }
    }

    .text-editor-modal__selector-label {
      position: absolute;
      left: 20px;
      top: 10px;
      font-weight: 400;
      font-size: 12px;
      line-height: 130%;
      color: var(--text-tertiary);
    }

    .text-editor-modal__input {
      border: 1px solid #dbdcdd;
      border-radius: 16px;
      padding: 14px 20px;
      width: 100%;
      height: 167px;
      text-align: left;
      display: block;
      line-height: 1.4;
      font-family: inherit;

      &.empty-error,
      &.length-error {
        border-color: var(--error-color);
      }

      &:focus-visible {
        outline: none;
      }
    }

    .empty-error-message,
    .length-error-message {
      color: var(--error-color);
      font-size: 12px;
      line-height: 130%;
      text-align: left;
      display: none;
    }

    .configurator-modal__footer,
    .text-editor-modal__footer {
      padding: 24px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      @media screen and (min-width: 1000px) {
        padding: 24px 40px;
      }

      .configurator-modal__button,
      .text-editor-modal__button {
        padding: 16px;
        min-width: 160px;
        background: var(--button-secondary);
        color: #fff;
        display: flex;
        border-radius: 50px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-weight: 700;
        font-size: 18px;
        line-height: 78%;

        @media screen and (min-width: 1000px) {
          min-width: 175px;
        }
      }
    }

    .configurator-modal__product-list-wrapper {
      overflow-y: auto;
      height: 100%;
      background-color: #fff;

      &::-webkit-scrollbar {
        width: 7px;
        background-color: #e5e5e5;
      }
      
      &::-webkit-scrollbar-thumb {
        background-color: var(--button-primary);
        border-radius: 100px;
      }
    }

    .configurator-product-list {
      padding: 18px 16px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      row-gap: 32px;

      @media screen and (min-width: 1000px) {
        padding: 16px 42px;
        grid-template-columns: 1fr 1fr 1fr;
      }

      .configurator-card {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .configurator-card__image {
          aspect-ratio: 1/1;
          overflow: hidden;
          border-radius: 10px;
          background-color: var(--background-secondary);
          position: relative;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }

          .atc-block {
            position: absolute;
            right: 0;
            bottom: 0;
            display: flex;
            z-index: 1;
            width: 100%;
            height: 100%;

            svg {
              position: absolute;
              right: 10px;
              bottom: 10px;
            }

            .button-atc,
            .button-edit,
            .button-added {
              &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0);
              }
            }

            .button-added {
              display: none;
            }

            &.active {
              .button-added {
                display: block;
              }

              .button-atc,
              .button-edit {
                display: none;
              }
            }
          }
        }

        .configurator-card__info {
          display: flex;
          flex-direction: column;
          gap: 6px;

          h3 {
            font-weight: 400;
            font-size: 16px;
            line-height: 140%;
          }

          .product-price .product-price__container {
            display: flex;
            gap: 6px;

            .price {
              font-weight: 700;
              font-size: 14px;
              line-height: 140%;
              text-align: center;
            }

            &:has(.compare-at-price) {
              .price {
                color: var(--brand-color-sale);
              }
            }

            .compare-at-price {
              font-weight: 400;
              font-size: 14px;
              line-height: 140%;
              color: var(--text-tertiary);
            }

            .price-badge {
              font-weight: 500;
              font-size: 12px;
              line-height: 130%;
              color: var(--brand-color-sale);
              background: rgba(243, 42, 59, 0.15);
              padding: 2px 5px;
              border-radius: 50px;
            }
          }
        }
      }
    }

    .loading-spinner {
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(10px);
      transform: translate(-50%, -50%);
      z-index: 2;

      &.active {
        display: flex;
      }

      svg {
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
      }
    }
  }

  .configurator-modal__filters {
    display: block;
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid var(--background-secondary);
    min-width: 0;
    flex-shrink: 0;
    overflow-x: auto;
    background-color: #fff;

    @media screen and (min-width: 1000px) {
      padding: 16px 40px;
    }

    .configurator-modal__filters-inner,
    .configurator-modal__filters-list {
      display: flex;
      gap: 12px;
    }

    .filter-item {
      cursor: pointer;
      display: flex;
      padding: 13px 12px;
      border-radius: 9999px;
      align-items: center;
      background: var(--background-secondary);
      min-width: 102px;
      justify-content: center;
      white-space: nowrap;
      font-weight: 400;
      font-size: 12px;
      line-height: 130%;
      text-align: center;
      
      span {
        white-space: nowrap;
        font-weight: 400;
        font-size: 12px;
        line-height: 130%;
        text-align: center;
      }

      @media screen and (min-width: 1000px) {
        min-width: 130px;
      }

      &.active {
        background: var(--brand-color);
        color: #fff;
      }
    }

    .configurator-modal__filters-all {
      min-width: 65px;

      @media screen and (min-width: 1000px) {
        min-width: 92px;
      }
    }
  }
}

.date-picker-modal {
  .date-picker-modal__wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    overflow: hidden;
    display: flex;

    .head-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 12px;
      background: var(--background-accent);

      h3 {
        font-weight: 700;
        font-size: 18px;
        line-height: 140%;

        @media screen and (min-width: 1000px) {
          font-size: 20px;
        }
      }
    }

    .calendar {
      font-weight: 400;
      font-style: normal;
      width: 95vw;
      background: #fff;
      border-radius: 10px;
      padding: 0;
      overflow: hidden;

      @media screen and (min-width: 500px) {
        width: 400px;
      }
    }
    
    .cal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 10px 24px;

      .title {
        font-weight: 700;
        font-size: 16px;
        line-height: 140%;
        text-align: center;
      }

      #prev[disabled] {
        opacity: 0;
        cursor: not-allowed;
      }

      #prev svg {
        transform: rotate(180deg);
      }
    }

    .cal-body {
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      gap: 12px;

      ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          padding: 0;
        }
      }
    }
    
    .days, .dates {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      row-gap: 12px;
      column-gap: 8px;
    }

    .days li {
      font-weight: 700;
      font-size: 14px;
      line-height: 140%;
      text-align: center;
      color: var(--text-secondary);
    }
    
    .dates li {
      flex: 1;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      line-height: 140%;
      text-align: center;
      list-style: none;
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--background-secondary);
      aspect-ratio: 1/1;
      cursor: pointer;

      &.old {
        background-color: transparent;
        color: var(--states-inactive);
        cursor: not-allowed;
      }
      &.selected {
        background: var(--button-secondary);
        color: #fff;
      }
    }

    .cal-footer {
      padding: 24px 10px 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      .cal-footer__button {
        width: 100%;
        padding: 16px;
        background: var(--button-secondary);
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        line-height: 78%;
        text-align: center;
        border-radius: 50px;
      }
    }
  }
}

.configurator-modal[data-step="1"] .configurator-modal__button.prev {
  opacity: 0.4;
  cursor: not-allowed;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}