@import url('/styles/subscribe.css');

.preferences--enhanced > * {
  display: none;
}

.preferences--enhanced > .preferences-app {
  display: block;
}

.preferences-container {
  .breadcrumb-wrapper {
    .breadcrumb-block-wrapper {
      background-color: var(--transparent-black);
    }
  }

  .preferenceMain {
    display: none;
    margin-top: 2px;
    height: calc(100vh - 220px);

    @media (width <= 480px) {
      height: calc(100vh - 174px);
    }

    &.firstScreen {
      &.active {
        display: block;
      }
    }

    &.secondScreen {
      &.active {
        display: block;
      }
    }

    &.thirdScreen {
      &.active {
        display: block;
      }
    }

    .content-container {
      @media (width <= 480px) {
        max-width: 360px;
      }

      .title {
        width: 100%;
        text-align: left;

        .title__paragraph {
          margin: 0;
          font-size: var(--heading-font-7-des);
          color: var(--gray-deep);
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-21-des-text-small);

          @media (width <= 767px) {
            font-size: var(--heading-font-8-mob);
            line-height: var(--heading-lh-17-mob-text-normal);
          }
        }

        :is(h1, h2, h3, h4, h5, h6) {
          font-size: var(--heading-font-17-des);
          margin-block: var(--space-15px) 0;
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-22-des-text-normal);

          @media (width <= 767px) {
            display: none;
          }
        }

        span {
          color: var(--color-grey);
          font-size: var(--subscription-font-2-desc);
          line-height: var(--subscription-lh-3-desc-display);
          font-weight: var(--fw-400);
          margin-top: var(--space-20px);
          display: inline-block;

          @media (width <= 767px) {
            display: none;
          }
        }
      }

      .skip {
        font-weight: var(--fw-400);
        text-align: right;
        padding: 0;

        a {
          font-size: var(--heading-font-7-des);
          color: var(--color-dark-blue);
          text-decoration: none;
          font-weight: var(--fw-700);
          padding: 0;
          margin-top: var(--space-10px);

          @media (width <= 767px) {
            font-size: var(--heading-font-20-mob-text);
            margin-top: var(--space-15px);
            line-height: var(--heading-lh-10-mob-text-small);
          }
        }
      }

      .calenderRangeMain {
        width: 100%;
        margin-block: var(--space-70px) 135px;

        @media (width <= 1420px) {
          margin-block: var(--space-50px) 0;
          display: flex;
        }

        @media (width <= 767px) {
          margin-block: var(--space-40px) 0;
          flex-direction: column;
        }

        .calender {
          float: left;
          width: 30%;

          picture {
            display: block;
            width: 100%;

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

          @media (width <= 767px) {
            width: 100%;

            img {
              aspect-ratio: 340 / 239;
              width: 100%;
              height: auto;
              object-fit: cover;
              margin: auto;
            }
          }

          @media (width >= 767px) {
            img {
              aspect-ratio: 383 / 262;
              width: 100%;
              height: auto;
              object-fit: cover;
            }
          }
        }

        .monthRangeMain {
          float: right;
          width: 70%;
          padding-left: var(--space-35px);
          padding-top: var(--space-25px);

          @media (width <= 767px) {
            width: 100%;
            padding-left: 0;
          }

          .txt1 {
            font-size: var(--heading-font-7-des);
            color: var(--gray-deep);
            font-weight: var(--fw-500);
            margin-bottom: var(--space-15px);

            @media (width <= 767px) {
              font-size: var(--heading-font-8-mob);
              line-height: var(--heading-lh-21-mob-text-small);
            }
          }

          .txt2 {
            font-size: var(--heading-font-19-des);
            color: var(--neutrals-sub-texts-paragraphs);
            font-weight: var(--fw-700);
            line-height: var(--heading-lh-17-des-text-medium);

            @media (width <= 767px) {
              font-size: var(--heading-font-12-mob);
              line-height: var(--heading-lh-4--mob-text-medium);
            }
          }

          .txt3 {
            font-size: var(--heading-font-11-mob-text-small);
            color: var(--color-grey);
            margin: 34px 0 0 var(--space-5px);
            font-weight: var(--fw-400);
            line-height: var(--heading-lh-22-mob-text-small);
          }

          .custom-range-slider {
            position: relative;

            .slider-track {
              height: 40px;
              background: var(--secondary-gray-30);
              border-radius: 20px;
              position: relative;
              margin: var(--space-16px) 0;

              @media (width <= 767px) {
                height: 30px;
              }

              .slider-progress {
                display: none;
              }
            }

            .slider-input {
              position: absolute;
              width: 97%;
              height: 10px;
              inset: 0.65rem auto auto 11px;
              -webkit-appearance: none;
              -moz-appearance: none;
              appearance: none;
              background: transparent;
              pointer-events: none;
              outline: none;
              z-index: 2;

              @media (width <= 767px) {
                width: 100%;
                left: 2px;
              }
            }

            .slider-input::-webkit-slider-runnable-track {
              -webkit-appearance: none;
              height: 10px;
              background: transparent;
            }

            .slider-input::-webkit-slider-thumb {
              -webkit-appearance: none;
              appearance: none;
              width: 40px;
              height: 40px;
              background: var(--indigo-shade);
              border-radius: 50%;
              cursor: pointer;
              pointer-events: auto;
              transition:
                transform 0.2s ease,
                box-shadow 0.2s ease;
              margin-top: -10px;

              @media (width <= 767px) {
                height: 30px;
                width: 30px;
              }
            }

            .slider-labels {
              display: flex;
              justify-content: space-between;
              margin-top: -2.5rem;
              margin-inline: 3%;

              @media (width <= 767px) {
                margin-top: -2.3rem;
              }

              .slider-label.active {
                color: var(--secondary-gray-10);
              }

              .slider-label {
                color: var(--darker-color);
                font-size: var(--heading-font-16-des);
                font-weight: var(--fw-400);
                z-index: 2;
                line-height: var(--subscription-lh-8-desc-display);
                cursor: pointer;

                @media (width <= 767px) {
                  font-size: var(--heading-font-20-mob-text);
                }
              }
            }
          }

          .carSelectMain {
            float: left;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;

            .mCSB_horizontal {
              .mCSB_scrollTools_horizontal {
                height: 3px;
                background: var(--gray-200);
                bottom: 7px;

                .mCSB_draggerContainer {
                  .mCSB_dragger {
                    .mCSB_dragger_bar {
                      border: var(--gray-200) solid 2px;
                      background: var(--secondary-gray-10);
                      height: 8px;
                      top: -10px;
                      margin: 5px 3px;
                      position: relative;
                      transition: background 0.2s;
                      min-width: 30px;
                      width: 220px;
                      max-width: 851px;

                      @media (width <= 767px) {
                        min-width: 30px;
                        width: 62px;
                        max-width: 330px;
                      }

                      &:hover,
                      &:active {
                        background: var(--secondary-gray-10);
                      }

                      &::after {
                        width: calc(100% - 6px);
                        height: 6px;
                        position: absolute;
                        background: var(--gray-200);
                        content: '';
                        inset: 1px auto auto 3px;
                        border-radius: 50px;
                      }
                    }
                  }

                  .mCSB_draggerRail {
                    height: 3px;
                    background: var(--gray-200);
                  }
                }
              }
            }

            ul {
              display: flex;
              flex-flow: row nowrap;
              padding: 0;
              margin: 0;
              min-width: 100%;
              list-style: none;

              li {
                flex: 0 0 auto;
                width: 168px;
                border: 1px solid var(--gray-200);
                float: left;
                padding: var(--space-35px) var(--space-15px) var(--space-15px);
                text-align: center;
                border-radius: 15px;
                position: relative;
                display: inline-table;

                @media (width <= 767px) {
                  width: 108px;
                  padding: var(--space-35px) var(--space-5px) var(--space-15px);
                }

                & + li {
                  margin-left: var(--space-20px);

                  @media (width <= 767px) {
                    margin-left: var(--space-15px);
                  }
                }

                &:first-child {
                  margin-left: var(--space-1px);
                }

                .checkboxMain {
                  position: absolute;
                  inset: 0 auto auto 0;
                  margin-bottom: 0;
                  padding-left: 0;
                  height: 100%;
                  width: 100%;

                  .checkBoxmark {
                    width: 20px;
                    height: 20px;
                    margin-left: -10px;
                    border-radius: 50%;
                    border: var(--tertiary-green) solid 1px;
                    position: absolute;
                    inset: 10px auto auto 50%;

                    @media (width <= 767px) {
                      width: 15px;
                      height: 15px;
                      margin-left: -7.5px;
                    }

                    &::after {
                      content: '';
                      display: none;
                    }
                  }

                  input[type='checkbox'] {
                    opacity: 0;
                    position: absolute;
                    inset: 0 auto auto 0;
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    z-index: 1;
                    cursor: pointer;

                    &:checked ~ .checkBoxmark {
                      background: var(--tertiary-green);

                      &::after {
                        content: '';
                        position: absolute;
                        inset: 2px auto auto 6px;
                        width: 6px;
                        height: 11px;
                        border: solid var(--secondary-gray-10);
                        border-width: 0 2px 2px 0;
                        transform: rotate(45deg);
                        display: block;

                        @media (width <= 767px) {
                          inset: 1px auto auto 3px;
                          width: 6px;
                          height: 9px;
                        }
                      }
                    }
                  }
                }

                .carImg {
                  width: 100%;
                  position: relative;

                  img {
                    width: 100%;
                    aspect-ratio: 84 / 61;
                    object-fit: contain;
                    display: block;
                    margin: auto;
                  }
                }

                .carTxt {
                  margin-top: var(--space-10px);

                  strong {
                    color: var(--color-dark-blue);
                    font-size: var(--heading-font-16-des);
                    line-height: var(--heading-lh-11-des-text-small);
                    font-weight: var(--fw-400);
                    margin-bottom: var(--space-5px);
                    display: inline-block;

                    @media (width <= 767px) {
                      font-size: var(--heading-font-20-mob-text);
                      line-height: var(--heading-lh-10-mob-text-small);
                    }
                  }

                  p {
                    color: var(--dark-grey-shade-2);
                    font-size: var(--heading-font-0-desc);
                    margin-block: 0;
                    line-height: var(--heading-lh-22-des-text-normal);

                    @media (width <= 767px) {
                      font-size: var(--subscription-font-2-mob);
                      width: 100%;
                      margin: auto;
                    }
                  }
                }
              }
            }
          }
        }

        .priceRangeMain {
          float: right;
          width: 70%;
          padding: var(--space-35px) 0 0 var(--space-25px);

          @media (width <= 767px) {
            width: 100%;
            padding: var(--space-40px) 0 0;
          }

          .txt1 {
            font-size: var(--heading-font-7-des);
            color: var(--gray-deep);
            font-weight: var(--fw-500);
            margin-bottom: var(--space-20px);

            @media (width <= 767px) {
              font-size: var(--heading-font-8-mob);
              margin-bottom: 15px;
            }
          }

          .custom-double-range-slider {
            position: relative;

            .range-display {
              display: flex;
              font-size: var(--heading-font-19-des);
              line-height: var(--heading-lh-15-des);
              font-weight: var(--fw-700);
              color: var(--neutrals-sub-texts-paragraphs);

              @media (width <= 767px) {
                font-size: var(--heading-font-12-mob);
                line-height: var(--heading-lh-5--mob);
                height: 40px;
              }
            }

            .slider-track {
              cursor: pointer;

              .slider-progress {
                height: 12px;
                background: var(--color-dark-blue);
                border-radius: 10px;
                position: absolute;
                inset: 43px 0 auto;
                z-index: 1;
                transition: width 0.2s ease;

                @media (width <= 767px) {
                  height: 5px;
                  inset: 40px 0 auto;
                }
              }
            }

            .slider-inputs {
              position: relative;
              height: 12px;
              background: var(--gray-200);
              border-radius: 20px;
              top: 14px;

              @media (width <= 767px) {
                height: 5px;
                top: 0;
              }

              .slider-input {
                position: absolute;
                width: 100%;
                height: 10px;
                inset: -2px auto auto 0;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                background: transparent;
                pointer-events: none;
                outline: none;
                z-index: 2;

                @media (width <= 767px) {
                  inset: -1px auto auto 0;
                }
              }

              .slider-input::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 35px;
                height: 35px;
                background: var(--indigo-shade);
                border: 2px solid var(--secondary-gray-10);
                border-radius: 50%;
                cursor: pointer;
                pointer-events: auto;
                transition:
                  transform 0.2s ease,
                  box-shadow 0.2s ease;
                margin-top: -10px;

                @media (width <= 767px) {
                  width: 25px;
                  height: 25px;
                }
              }

              .slider-input::-webkit-slider-runnable-track {
                -webkit-appearance: none;
                height: 10px;
                background: transparent;
              }
            }
          }

          .rangePrice {
            float: left;
            width: 100%;
            padding-block: var(--space-15px) var(--space-25px);
            display: block;

            @media (width <= 767px) {
              display: block;
              padding-block: var(--space-5px) var(--space-25px);
            }

            .rangePrice__list {
              padding: 0;
              margin: var(--space-20px) 0 0;
              list-style: none;
              display: flex;
              justify-content: space-between;

              @media (width <= 767px) {
                margin: var(--space-8px) 0 0;
              }

              .rangePrice__items {
                color: var(--gray-600);
                line-height: var(--heading-lh-22-mob-text-small);
                font-size: var(--heading-font-11-mob-text-small);
              }
            }
          }
        }

        .range-container {
          margin-top: 25px;

          .labels {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 9px;
            color: #999;
          }

          .slider-wrap {
            position: relative;
            width: 100%;
            display: flex;
          }

          .bubble {
            position: absolute;
            top: -42px;
            left: 0;
            padding: 5px 12px;
            transform: translateX(-50%);
            white-space: nowrap;
            background: #fff;
            font-size: 0.75rem;
            color: #666666;
            box-shadow: 1px 1px 3px #fcbd4c;
            border-radius: 15px;
            z-index: 2;
          }

          input[type='range'] {
            width: 100%;
            -webkit-appearance: none;
            background: transparent;
          }

          input[type='range'] {
            &::-webkit-slider-runnable-track {
              height: 6px;
              border-radius: 6px;
              background: linear-gradient(to right, var(--color-dark-blue) var(--percent, 0%), #aaa var(--percent, 0%));
            }
            &:nth-child(2) {
              &::-webkit-slider-runnable-track {
                background: transparent;
                height: 0;
              }
            }
          }

          input[type='range']::-moz-range-track {
            height: 6px;
            border-radius: 6px;
            background: #aaa;
            z-index: 1;
          }

          input[type='range']::-moz-range-progress {
            height: 6px;
            border-radius: 6px;
            background: var(--color-dark-blue);
            z-index: 1;
          }

          input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 26px;
            height: 26px;
            background: var(--color-dark-blue);
            border-radius: 50%;
            cursor: pointer;
            margin-top: -8px;
            z-index: 2;
          }

          input[type='range']::-moz-range-thumb {
            width: 26px;
            height: 26px;
            background: var(--color-dark-blue);
            border-radius: 50%;
            cursor: pointer;
            z-index: 2;
          }

          input[type='range']:focus {
            outline: none;
          }

          small {
            font-size: var(--subscription-font-2-mob);
            color: var(--gray-600);
          }

          &.dual {
            input[type='range'] {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              -webkit-appearance: none;
              appearance: none;
              background: none;
            }

            .range-track {
              position: absolute;
              top: 50%;
              width: 100%;
              background: #bbb;
              border-radius: 2px;
              transform: translateY(-50%);
            }

            .range {
              position: absolute;
              top: 50%;
              background: var(--color-dark-blue);
              border-radius: 6px;
              transform: translateY(-50%);
              height: 6px;
              top: 3px;
              z-index: 1;
            }

            .legneds {
              display: flex;
              justify-content: space-between;
              margin-top: 20px;
            }

            .price-range-text {
              display: flex;
              gap: 8px;
              margin-bottom: 20px;

              p {
                font-size: var(--subscription-font-h5);
                font-weight: var(--fw-500);
                margin: 0;
              }
            }
          }
        }
      }
    }
  }

  .preference-bottom {
    position: fixed;
    width: 100%;
    inset: auto auto 0 0;
    padding: var(--space-20px) 0;
    box-shadow: 0 -2px 10px var(--sub-black-20);
    background: var(--secondary-gray-10);
    z-index: 2;

    .content-container {
      @media (width <= 480px) {
        max-width: 360px;
        padding: 0;
      }
    }

    @media (width <= 767px) {
      position: relative;
      box-shadow: none;
      float: left;
    }

    .preferBottLeft {
      @media (width <= 767px) {
        width: 100%;
        margin-top: var(--space-25px);
        padding: var(--space-15px) var(--space-10px) 95px;
        border-top: var(--neutral-light) solid 1px;
      }
    }

    .preferBottRight {
      width: 50%;
      float: right;
      text-align: right;

      @media (width <= 767px) {
        width: 100%;
        padding: var(--space-15px) var(--space-10px);
        box-shadow: 0 -2px 10px var(--sub-black-10);
        background: var(--secondary-gray-10);
        position: fixed;
        inset: auto auto 0 0;
        z-index: 10;
        box-sizing: border-box;
      }

      .preferBottRight__list {
        padding: 0;
        margin: var(--space-5px) 0 0;
        list-style: none;

        @media (width <= 767px) {
          width: 100%;
          text-align: center;
          display: flex;
          justify-content: space-between;
          margin: 0;
        }

        .preferBottRight__items {
          display: inline-block;
          width: auto;

          .preferBottRight__button {
            display: inline-block;
            min-width: 200px;
            text-align: center;
            padding: var(--space-14px) var(--space-50px) var(--space-12px);
            margin-left: var(--space-20px);
            box-sizing: border-box;

            @media (width <= 992px) {
              width: 150px;
              padding: var(--space-14px) var(--space-30px) var(--space-12px);
            }

            @media (width <= 767px) {
              margin-left: 0;
              width: 100%;
              min-width: auto;
              padding: var(--space-14px) var(--space-10px) var(--space-12px);
            }

            a {
              color: var(--neutrals-sub-texts-paragraphs);

              &:hover {
                text-decoration: none;
              }
            }
          }

          @media (width <= 767px) {
            width: 48%;
          }
        }
      }
    }
  }
}

.apper,
footer {
  display: none;
}