@import url('../../../commons/blocks/services/buy-a-package/buy-a-package.css');

.buy-a-package.block {
  background-color: var(--tertiary-white);
  font-family: var(--body-font-arena);

  .stepper-container .controls {
    flex-direction: unset;
  }

  .stepper-container .content {
    padding-top: 24px;

    @media (min-width: 1024px) {
      padding-top: 48px;
    }
  }

  .stepper-container .stepper {
    gap: 16px;

    @media (min-width: 1024px) {
      gap: 80px;
    }
  }

  .stepper-container .stepper .step {
    color: var(--tertiary-black);
    font-size: var(--body-font-size-xxxs);
    line-height: var(--heading-font-18-mob-text);
    font-weight: var(--fw-400);
    text-transform: uppercase;
    display: flex;
    padding: 4px 16px 8px 8px;
    align-items: center;
    gap: 10px;

    @media (min-width: 1024px) {
      font-size: var(--body-font-size-xxs);
      line-height: var(--heading-lh-11-des-text-small);
      padding: 8px 16px 12px 8px;
    }

    h2 {
      all: unset;
    }

    span {
      display: none;
    }

    &::after {
      display: none;
    }
  }

  .stepper-container .stepper .step.completed {
    color: var(--tea-green-text);
  }

  .stepper-container .step.selected {
    color: var(--primary-blue-700);
    font-weight: var(--fw-700);
    border-bottom: 2px solid var(--primary-blue-700);

    span {
      color: var(--primary-blue-700);
    }
  }

  .stepper.g-container {
    padding: 0;
    width: auto;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--bars-unselected);

    @media (min-width: 1024px) {
      margin-left: 56px;
      margin-right: 56px;
      margin-bottom: 0px;
    }
  }

  .bap-header {
    .payment-page-link {
      .cta__new-primary {
        background-color: var(--primary-blue-700);
        width: 100%;

        &:hover {
          background-color: var(--primary-blue-800);
        }

        @media (width >=1024px) {
          width: auto;
        }
      }
    }
  }

  .bap-header-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;

    @media (width >=1024px) {
      gap: 16px;
      align-self: center;
    }

    .prev-btn,
    :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0;
      color: var(--secondary-black);
      font-size: var(--heading-font-15-mob-sub-heading);
      font-feature-settings:
        'liga' off,
        'clig' off;
      font-style: normal;
      font-weight: var(--fw-700);
      line-height: var(--heading-lh-12-des);
      letter-spacing: normal;

      @media (width >=1024px) {
        font-size: var(--heading-font-1-des);
        line-height: var(--heading-lh-16-des-display);
        margin: 0;
      }
    }

    .prev-btn {
      margin-top: 8px;

      svg {
        width: 24px;
        height: 24px;
      }
    }
  }

  .control-condition {
    background: var(--tertiary-white);
    box-shadow: 0 2px 30.3px 0 rgba(0, 0, 0, 0.1);

    .orders__save {
      display: none;

      @media (min-width: 1024px) {
        display: flex;
        background: linear-gradient(228deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%);
        padding: 12px 16px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        align-self: stretch;
        color: var(--primary-black);
        font-size: var(--body-font-size-xxs);
        font-style: normal;
        font-weight: var(--fw-400);
        line-height: var(--heading-lh-6-des);
        letter-spacing: normal;

        .orders__amt {
          color: var(--primary-black);
          font-size: var(--body-font-size-xxs);
          font-style: normal;
          line-height: var(--heading-lh-6-des);
          letter-spacing: normal;
          font-weight: var(--fw-700);
        }
      }
    }

    .orders__pkgs {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      align-self: stretch;
      padding-inline: 0;

      @media (width >=1024px) {
        gap: 32px;
      }

      .orders__count {
        color: var(--secondary-black);
        font-size: var(--body-font-size-xxxs);
        font-style: normal;
        font-weight: var(--fw-600);
        line-height: var(--heading-lh-21-mob-text-small);

        @media (width >=1024px) {
          color: var(--light-grey);
          font-size: var(--body-font-size-xxs);
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-6-des);
        }
      }

      .orders__list {
        display: flex;
        flex-direction: column;
        align-items: self-start;
        text-align: right;

        .orders__pkg {
          color: var(--secondary-black);
          font-style: normal;
          font-size: var(--body-font-size-xxxs);
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-21-mob-text-small);

          @media (width >=1024px) {
            color: var(--primary-black);
            font-size: var(--body-font-size-xs);
            font-weight: var(--fw-700);
            line-height: var(--heading-lh-6-des);
          }
        }
      }
    }

    .orders__pkgs-controls {
      display: flex;
      padding: 20px 20px 16px 20px;
      flex-direction: column;
      gap: 16px;
      align-self: stretch;

      @media (width >=1024px) {
        flex-direction: row;
        justify-content: space-between;
        padding-inline: 56px;
        padding-block: 24px;
      }
    }

    .controls {
      .button {
        margin-inline: 0;

        @media (width >=1024px) {
          padding-inline: 16px;
        }
      }

      .prev-btn {
        margin-bottom: 0;
        border: 1px solid var(--primary-blue-700);
        background-color: unset;
        color: var(--primary-blue-700);
        text-align: center;
        font-feature-settings:
          'liga' off,
          'clig' off;
        font-size: var(--body-font-size-xxs);
        font-weight: var(--fw-400);
        line-height: var(--heading-lh-11-des-text-small);

        @media (min-width: 1024px) {
          font-size: var(--body-font-size-xs);
        }
      }

      .next-btn {
        background: var(--primary-blue-700);
        color: var(--secondary-gray-20);
        text-align: center;
        font-feature-settings:
          'liga' off,
          'clig' off;
        font-size: var(--body-font-size-xxs);
        font-weight: var(--fw-400);
        line-height: var(--heading-lh-11-des-text-small);

        @media (min-width: 1024px) {
          font-size: var(--body-font-size-xs);
        }
      }
    }
  }

  .content {
    .close-button {
      width: 24px;
      height: 24px;

      &::before {
        width: 24px;
        height: 24px;
      }
    }

    .pkg__time {
      &::before {
        width: 24px;
        height: 24px;
        top: 0;
        left: 0;
      }
    }

    .offer {
      background: none;
      margin-top: 0;
    }

    input[type='text'] {
      background: none;
      border: none;

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }

    .pkg__details,
    .bill__details {
      background: var(--tertiary-white);
    }

    .pkg__edit {
      background: url('/icons/edit-icon.svg') no-repeat center center;
      background-size: contain;
    }

    .pkg__title,
    .pkg__price-new,
    .offer__input {
      font-size: var(--heading-font-20-mob-text);
      line-height: var(--heading-lh-19-mob-display);
    }

    .ew-eligibility-flow-block {
      background: var(--secondary-gray-20);
      padding-top: 0;

      .proceed-modal__spinner {
        border-width: 8px;
        border-top: 8px solid var(--secondary-main);
      }

      .form__wrapper {
        .clip__path-inner {
          clip-path: none;
        }

        .form__wrapper-inner {
          background: var(--secondary-gray-20);
          padding: 24px 16px 24px 16px;

          @media (width>=1024px) {
            padding: 32px 32px 24px 32px;
          }

          .form__input-grid {
            .dropdown-with-details {
              margin-bottom: 16px;
            }

            .form__input--odometer {
              margin-top: 48px;

              @media (width>=1024px) {
                margin-top: 0;
              }
            }

            .form__input--mobile {
              &:has(input[type='text']:read-only) {
                &::after {
                  mask: url('/icons/tick-mark.svg');
                  width: 24px;
                  height: 24px;
                }
              }
            }
          }

          .form__input--disclaimer {
            font-weight: var(--fw-400);

            p {
              color: var(--inactive-content);
              font-size: var(--body-font-size-xxxs);

              @media (width>=1024px) {
                line-height: var(--heading-lh-4--mob-text-medium);
              }
            }
          }
        }
      }
    }

    input[type='text'] {

      border-bottom: 0.5px solid var(--tertiary-black);
      font-weight: var(--fw-500);
      line-height: var(--heading-lh-4--mob-text-medium);
      padding: 8px 0;

      @media (width>=1024px) {
        line-height: var(--heading-lh-6-des);
      }
    }

    .form__input-button {
      color: var(--primary-blue-700);
      border: 1px solid var(--primary-blue-700);
      padding: 8px 12px;
      font-size: var(--body-font-size-xxs);

      @media (width>=1024px) {
        font-size: var(--body-font-size-xs);
        padding: 8px 16px;
      }
    }

    .form__input-label {
      font-size: var(--body-font-size-xxs);
      ;
      font-weight: var(--fw-700);
      line-height: var(--heading-lh-4--mob-text-medium);
    }

    .form__input--send {
      padding-top: 0;

      @media (width>=1024px) {
        display: block;
      }
    }

    .form__inner--input {
      margin-bottom: 48px;

      @media (width>=1024px) {
        margin-bottom: 0;
      }
    }

    .form__inner--otp {
      margin-top: 2px;
    }

    .form__input-button--resend {
      border: none;
      text-decoration: underline;
      font-size: var(--body-font-size-xxxs);
      font-weight: var(--fw-400);
      line-height: var(--heading-lh-10-mob-text-small);
      color: var(--inactive-content);
      padding-right: 0;

    }

    .odometer-reading {
      border-bottom: 0.5px solid var(--tertiary-black);

      input[type='text'] {
        border: none;
        color: var(--primary-blue-700);
      }
    }

    .odometer-reading__button--minus {
      background: url('/icons/minus-blue.svg') center / contain no-repeat;
    }

    .odometer-reading__button--plus {
      background: url('/icons/add-blue.svg') center / contain no-repeat;
    }

    .car-list__items {
      padding: 16px;

      @media (width>=1024px) {
        padding: 16px 12px;
      }
    }

    .car-list__reg-label {
      text-transform: none;
      font-size: var(--body-font-size-xxxs);
      font-weight: var(--fw-300);
      line-height: var(--heading-lh-21-mob-text-small);
    }

    .car-list__radio {
      display: flex;
      align-items: center;
      gap: 16px;

      input[type='radio'] {
        appearance: none;
        -webkit-appearance: none;
        width: 24px;
        height: 24px;
        border: none;
        box-shadow: 0 0 0 1px var(--dark-color);
        cursor: pointer;
        border-radius: 1%;
        position: relative;
        background-color: var(--tertiary-white);
      }

      input[type='radio']:checked {
        box-shadow: 0 0 0 1px var(--dark-color);
      }

      input[type='radio']:checked::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 16px;
        height: 16px;
        background-color: var(--primary-blue-700);
        border-radius: 1px;
      }
    }

    .car-list__reg-number {
      font-weight: var(--fw-700);
    }

    .car-details__info {
      background: var(--secondary-gray-10);
    }

    .disclaimers-section {
      .disclaimer-item {
        margin-bottom: 24px;
      }

      .disclaimer-checkbox {
        input[type='checkbox'] {
          &:checked {
            background: var(--primary-blue-700);
          }
        }
      }

      .disclaimer-text {
        p {
          font-size: var(--body-font-size-xxxs);
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-21-mob-text-small);
        }
      }
    }

    .proceed-modal__did-you-know {
      @media (width>=1024px) {
        padding: 0;
      }
    }

    .proceed-modal--arena {
      max-width: 615px;
      width: 100%;
      background: var(--tertiary-white);
      ;
    }

    .proceed-modal--arena .proceed-modal__image-section {
      display: none;
    }

    .proceed-modal--arena .proceed-modal__content-section {
      width: 100%;
      padding: 16px;
      margin-top: 0;
      clip-path: none;

      @media (width >=768px) {
        padding: 24px;
      }
    }

    .proceed-modal__close--arena {
      position: absolute;
      top: 16px;
      right: 16px;
      border: none;
      cursor: pointer;
      width: 13px;
      height: 13px;
      display: flex;
      align-items: center;
      justify-content: center;

      @media (width>=1024px) {
        width: 24px;
        height: 24px;
        top: 28px;
        right: 28px;
      }

      &::before {
        content: '';
        width: 16px;
        height: 16px;
        background: url('/icons/close.svg') no-repeat center;
        background-size: contain;
      }
    }

    .proceed-modal--arena .proceed-modal__content-inner {
      display: flex;
      flex-direction: column;
      gap: 8px;

      @media (width>=1024px) {
        gap: 16px;
      }
    }

    .proceed-modal--arena .proceed-modal__title {
      font-size: var(--body-font-size-sm);
      font-weight: var(--fw-600);
      margin: 0;
      line-height: var(--heading-lh-5--mob);
      padding-right: 2rem;

      @media (width >=1024px) {
        font-size: var(--body-font-size-l);
        font-weight: var(--fw-700);
        line-height: var(--heading-lh-19-mob-text-small);
      }
    }

    .proceed-modal--arena .proceed-modal__did-you-know {
      background: transparent;
      margin: 0;
      padding: 0;
    }

    .proceed-modal--arena .proceed-modal__did-you-know-header {
      display: none;
    }

    .proceed-modal--arena .proceed-modal__did-you-know-text {
      font-size: var(--body-font-size-xxxs);
      margin: 0;
      text-align: left;
      font-weight: var(--fw-300);

      @media (width >=768px) {
        font-size: var(--body-font-size-xs);
        line-height: var(--heading-lh-6-des);
        font-weight: var(--fw-400);
      }
    }

    .proceed-modal--arena .proceed-modal__loader {
      order: 3;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .proceed-modal--arena .proceed-modal__main-content {
      display: contents;
    }

  }

  .ew-package-summary {
    background: var(--secondary-gray-20);
    margin-top: 0;
    padding-block: 16px;
    padding-inline: 18px;

    @media (min-width: 1024px) {
      padding: 24px;
    }

    .header {
      gap: 12px;

      & :is(h1, h2, h3, h4, h5, h6) {
        font-size: var(--body-font-size-xxs);
        font-style: normal;
        font-weight: var(--fw-700);
        line-height: var(--heading-font-12-mob);

        @media (min-width: 1024px) {
          font-size: var(--body-font-size-xs);
          line-height: var(--heading-lh-19-mob-display);
        }
      }

      .description {
        color: var(--secondary-main);
        font-size: var(--body-font-size-xxxs);
        font-style: normal;
        font-weight: var(--fw-400);
        line-height: var(--heading-lh-21-mob-text-small);

        @media (min-width: 1024px) {
          font-size: var(--body-font-size-xxs);
          line-height: var(--heading-lh-19-mob-display);
        }
      }
    }

    &::before {
      display: none;
    }

    .package-wrapper {
      .package-card {
        background: var(--Gradients-Accent-Section-Bg-1, linear-gradient(228deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%));
        padding: 1rem;
        padding-block: 12px;
        display: flex;
        flex-direction: column;
        gap: 0;

        @media (min-width: 1024px) {
          gap: 4px;
        }

        .card-description {
          margin-top: 0;
          color: var(--primary-main);
          font-size: var(--body-font-size-xxxs);
          line-height: var(--heading-lh-21-mob-text-small);
          font-weight: var(--fw-400);

          @media (min-width: 1024px) {
            color: var(--primary-black);
            font-size: var(--body-font-size-xxs);
            line-height: var(--heading-lh-19-mob-display);
          }
        }

        p {
          color: var(--primary-main);
          font-size: var(--body-font-size-xs);
          font-style: normal;
          font-weight: var(--fw-700);
          line-height: var(--heading-lh-19-mob-display);

          @media (min-width: 1024px) {
            color: var(--primary-black);
          }
        }
      }
    }
  }

  .select-ew-layout {
    .select-layout {
      gap: 24px;
    }

    .bap-card-wrapper {
      @media (width >=1024px) {
        min-height: 192px;
      }
    }

    .ew-package-summary {
      .package-wrapper {
        .package-card {
          :is(h1, h2, h3, h4, h5, h6) {
            display: none;
          }
        }
      }
    }
  }

  .select-ccp-layout {
    .tc-dialog {
      margin: 78px 20px 79px 20px;
      padding: 0;
      max-width: 100%;
      height: 120vh;

      @media (width >=1024px) {
        margin: 134px 366px 134px 367px;
        position: absolute;
      }

      &::backdrop {
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
      }

      .modal-box {
        background-color: var(--tertiary-white);

        padding: 16px;

        @media (width >=1024px) {
          max-width: 100%;
          padding: 24px;
          position: relative;
        }

        .modal-box-header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .heading {
            :is(h1, h2, h3, h4, h5, h6) {
              margin: 0;
              color: var(--tertiary-black);
              font-feature-settings:
                'liga' off,
                'clig' off;
              font-size: var(--body-font-size-sm);
              font-weight: var(--fw-600);
              line-height: var(--heading-lh-5--mob);
            }
          }

          .button {
            position: absolute;
            padding: 0;

            .cross-icon {
              position: relative;
              inset: 0;
              height: 24px;
              width: 24px;
              padding: 0;
            }
          }
        }

        .checkbox-container {
          height: 40px;
          align-items: center;

          input[type='checkbox'] {
            height: 24px;
            width: 24px;
          }
        }

        .popup-text {
          padding: 0;
          border-bottom: 0;
          height: 40vh;

          .heading {
            display: none;
          }

          .popup-header {
            display: flex;
            flex-direction: row;

            .cross-icon {
              display: block;
              justify-content: center;
              align-items: center;
            }
          }

          .heading::after {
            display: none;
          }

          .cross-icon {
            height: 24px;
            width: 24px;
          }
        }

        .proceed-btn {
          background: var(--primary-blue-700);
          padding: 0 12px;
          margin-top: 0;
          height: 40px;
          gap: 4px;
          width: 100%;

          &:disabled {
            background: var(--primary-blue-700);
            opacity: 0.5;
            cursor: not-allowed;
          }
        }

        .checkbox-container {
          color: var(--tertiary-black);
          text-align: center;
          font-size: var(--body-font-size-xxs);
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-19-mob-display);
        }
      }
    }

    .select-layout {
      .ccp-selection {
        .bap-card-wrapper {
          @media (width >=1024px) {
            min-height: auto;
          }
        }

        .ccp-buy-later {
          background-color: var(--secondary-gray-20);
          padding: 16px;

          @media (min-width: 1024px) {
            padding-block: 24px;
          }

          label {
            gap: 16px;

            input[type='radio'] {
              padding: 0;
              width: 20px;
              height: 20px;
              border-radius: 0%;
              box-shadow: 0 0 0 1px var(--bars-unselected);
              border: 3px solid var(--secondary-gray-10);
              background-color: var(--tertiary-white);

              @media (width >=1024px) {
                width: 24px;
                height: 24px;
                border: 4px solid var(--secondary-gray-10);
              }

              &:checked {
                background-color: var(--primary-blue-700);
              }
            }
          }

          p {
            color: var(--primary-black);
            font-size: var(--body-font-size-xxs);
            font-style: normal;
            font-weight: var(--fw-400);
            line-height: var(--heading-lh-4--mob-text-medium);

            @media (min-width: 1024px) {
              font-size: var(--body-font-size-xs);
              font-weight: var(--fw-500);
              line-height: var(--heading-lh-6-des);
            }
          }
        }
      }
    }

    .package-card {
      .card-description {
        display: none;
      }
    }
  }

  .disclaimer {
    padding: 12px 16px;
    background-color: var(--tea-green);
    color: var(--tea-green-text);
    font-size: var(--body-font-size-xxs);
    font-weight: var(--fw-400);
    line-height: var(--heading-lh-19-mob-display);

    strong {
      font-weight: var(--fw-600);
    }
  }

  .bap-accordion {
    .bap-accordion-item {
      background: var(--secondary-gray-20);

      &.bg-gradient {
        background: linear-gradient(228deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%);
      }

      padding: 16px;

      @media (min-width: 1024px) {
        padding: 24px;
      }

      .bap-heading {
        .card-head {
          gap: 24px;

          @media (min-width: 1024px) {
            gap: 8px;
          }

          :is(h1, h2, h3, h4, h5, h6) {
            color: var(--primary-black);
            font-size: var(--body-font-size-xs);
            font-style: normal;
            font-weight: var(--fw-700);
            line-height: var(--heading-lh-19-mob-display);
          }

          .validity {
            color: var(--primary-main);
            font-size: var(--body-font-size-xxxs);
            font-style: normal;
            font-weight: var(--fw-400);
            line-height: var(--heading-lh-21-mob-text-small);

            @media (width >=1024px) {
              color: var(--primary-black);
              line-height: var(--heading-lh-11-des-text-small);
            }
          }
        }

        .accordion-icon {
          background-image: url(/icons/minus-blue.svg);
        }
      }
    }
  }

  .bap-card-wrapper {
    background: transparent;

    &.no-details {
      .bap-card {
        .card-title {
          background-image: none;
        }
      }
    }

    .bap-card {
      background: var(--secondary-gray-10);
      gap: 20px;

      .warranty-info {
        color: var(--primary-black);

        .label {
          font-size: var(--body-font-size-xxxs);
          font-style: normal;
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-21-mob-text-small);

          @media (width >=1024px) {
            line-height: var(--heading-lh-11-des-text-small);
          }
        }

        .value {
          font-size: var(--body-font-size-xxs);
          font-style: normal;
          font-weight: var(--fw-700);
          line-height: var(--heading-font-12-mob);

          @media (width >=1024px) {
            font-size: var(--body-font-size-xs);
            line-height: var(--heading-lh-19-mob-display);
          }
        }
      }

      .price-info {
        gap: 12px;

        .emi-info {
          border-right: 1px solid transparent;
          background-image: linear-gradient(180deg, rgba(147, 147, 147, 0) 0%, var(--inactive-content) 50%, rgba(147, 147, 147, 0) 100%);
          background-repeat: no-repeat;
          background-position: right top;
          background-size: 1px 100%;
          gap: 4px;
          padding-right: 12px;

          p {
            color: var(--secondary-main);
            font-size: var(--body-font-size-xxxs);
            line-height: var(--heading-lh-21-mob-text-small);

            @media (width >=1024px) {
              font-size: var(--body-font-size-xxs);
              line-height: var(--heading-lh-19-mob-display);
            }
          }

          .price-emi {
            color: var(--primary-black);
            font-size: var(--body-font-size-xxs);
            font-weight: var(--fw-500);
            line-height: var(--heading-font-12-mob);

            @media (width >=1024px) {
              color: var(--light-grey);
              font-weight: var(--fw-700);
              line-height: var(--heading-lh-19-mob-display);
            }
          }
        }

        .price-mrp {
          gap: 4px;

          .mrp-label {
            color: var(--secondary-main);
            font-size: var(--body-font-size-xxxs);
            font-weight: var(--fw-400);
            line-height: var(--heading-lh-21-mob-text-small);

            @media (width >=1024px) {
              color: var(--light-grey);
              font-size: var(--body-font-size-xxs);
              line-height: var(--heading-lh-19-mob-display);
            }
          }

          .mrp-price {
            .offer-price {
              color: var(--primary-black);
              font-size: var(--body-font-size-xxs);
              font-style: normal;
              font-weight: var(--fw-500);
              line-height: var(--heading-font-12-mob);

              @media (width >=1024px) {
                color: var(--light-grey);
                font-size: var(--body-font-size-xxs);
                font-style: normal;
                font-weight: var(--fw-700);
                line-height: var(--heading-lh-19-mob-display);
              }
            }

            .mrp {
              color: var(--inactive-content);
              font-size: var(--body-font-size-xxxs);
              font-style: normal;
              font-weight: var(--fw-400);
              line-height: var(--heading-lh-21-mob-text-small);

              @media (width >=1024px) {
                font-size: var(--body-font-size-xxs);
                font-weight: var(--fw-300);
                line-height: var(--heading-lh-19-mob-display);
              }
            }
          }
        }
      }

      .card-title {
        gap: 16px;
        border-bottom: 1px solid transparent;
        background-image: linear-gradient(90deg, rgba(204, 204, 204, 0) 0%, var(--bars-unselected) 50%, rgba(204, 204, 204, 0) 100%);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100% 1px;
        padding-bottom: 12px;

        :is(h1, h2, h3, h4, h5, h6, p) {
          color: var(--primary-black);
          font-size: var(--body-font-size-xxs);
          font-style: normal;
          font-weight: var(--fw-700);

          @media (width >=1024px) {
            font-size: var(--body-font-size-xs);
            line-height: var(--heading-lh-19-mob-display);
          }
        }

        input[type='radio'] {
          padding: 0;
          width: 20px;
          height: 20px;
          border-radius: 0%;
          box-shadow: 0 0 0 1px var(--bars-unselected);
          border: 3px solid var(--secondary-gray-10);

          @media (width >=1024px) {
            width: 24px;
            height: 24px;
            border: 4px solid var(--secondary-gray-10);
          }

          &:checked {
            background-color: var(--primary-blue-700);
          }
        }
      }

      .card-description p {
        color: var(--primary-black);
        font-size: var(--body-font-size-xxxs);
        font-weight: var(--fw-400);
        line-height: var(--heading-lh-21-mob-text-small);

        @media (min-width: 1024px) {
          font-size: var(--body-font-size-xxs);
          line-height: var(--heading-lh-6-des);
        }
      }
    }

    .discount-label {
      background: var(--Gradients-Accent-Section-Bg-1, linear-gradient(228deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%));

      .discount-icon {
        background: url(/icons/time.svg) no-repeat;
        width: 18px;
        height: 18px;
      }

      .discount-text p {
        color: var(--primary-black);
        line-height: var(--heading-lh-6-des);

        strong {
          font-weight: var(--fw-700);
        }
      }
    }
  }

  .ew-cards-wrapper {
    .bap-cards {
      margin-top: 24px;
      gap: 24px;
      margin-bottom: 12px;

      @media (min-width: 1024px) {
        margin-bottom: 24px;
      }
    }

    .bap-note {
      align-self: stretch;

      p {
        font-size: var(--body-font-size-xxxs);
        font-style: normal;
        font-weight: var(--fw-400);
        line-height: var(--heading-lh-21-mob-text-small);

        @media (width >=1024px) {
          font-size: var(--body-font-size-xxs);
          font-weight: var(--fw-300);
          line-height: var(--heading-lh-19-mob-display);
        }
      }
    }
  }

  .veh__body {
    @media (width >=1024px) {
      padding: 24px;
      gap: 30px;
      align-items: flex-start;
      flex-direction: column;
    }

    @media (width >=1366px) {
      flex-direction: row;
      gap: unset;
    }
  }

  .veh__head {
    :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--heading-font-4-mob);
    }
  }

  .veh__label {
    font-size: var(--heading-font-11-mob-text-small);
    text-transform: none;
  }
}

.bill {
  display: flex;
  flex-direction: column;
  position: relative;

  .bill__details {
    background: var(--tertiary-white);
  }
}

.bill__item-border {
  display: none;
}

.bill__toast {
  color: var(--tea-green-text);
  background-color: var(--tea-green);
}

.pkg__toast-ew {
  color: var(--primary-black);
  background: linear-gradient(228deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%);
}

.pkg__toast p,
.bill__toast,
.bill__cost-title {
  font-size: var(--heading-font-20-mob-text);
}

.pkg__toast p::before {
  content: '';
  background: url('/icons/error-blue.svg') no-repeat center center;
  background-size: contain;

  @media (min-width: 768px) {
    top: 11px;
  }
}

.bill__item-text {
  color: var(--secondary-main);
}

.bill__amount-text {
  font-size: var(--heading-font-8-mob);
}

.pkg__time::before {
  content: '';
  background: url('/icons/time-blue.svg') no-repeat center center;
  background-size: contain;
}

.pkg__info {
  background: url('/icons/error-black.svg') no-repeat center center;
  background-size: contain;
  display: flex;
  justify-self: center;
  align-self: center;
  padding: 0;
}

.pkg__title,
.pkg__price-new {
  font-size: var(--heading-font-20-mob-text);
}

.pkg__price-label,
.pkg__price-old {
  font-size: var(--heading-font-11-mob-text-small);
}

.pkg__value,
.pkg__title,
.offer__subtitle,
.bill__item-value {
  color: var(--primary-black);
}

.pkg__title {
  border-bottom: none;
}

.offer__subtitle p {
  font-size: var(--heading-font-8-mob);
}

.pkg__toast-ew::before {
  content: '';
  background: url('/icons/time-gray.svg');
  background-size: contain;
}

.hidden_checkbox:checked+.terms__checkbox {
  border: 1px solid var(--primary-blue-700);
  background: var(--primary-blue-700);

  &::before {
    content: '';
    background-size: contain;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

.pkg__processing {
  .pkg__time::before {
    content: '';
    background: url('/icons/time-white.svg') no-repeat center center;
    background-size: contain;
  }
}

.pkg__amount .pkg__amount-total {
  font-size: var(--heading-font-8-mob);
}

.pkg__toast--after {
  background: var(--tea-green);
  color: var(--tea-green-text);
  align-items: center;
}

.pkg__purchased {
  .pkg__time {
    &::before {
      content: '';
      background: url('/icons/checkbox_white.svg');
      background-size: contain;
      top: 4px;
      left: 4px;
    }
  }
}

.pkg__toast--after::before {
  content: '';
  background-size: contain;
  display: flex;
  justify-self: center;
  top: 12px;
}

.payment-popup.modal-dialog {
  overflow: hidden;

  .close-button {
    padding: 0;
    background: none;

    &:before {
      content: '';
      width: 24px;
      height: 24px;
      z-index: 1;
    }
  }

  @media (width >=1024px) {
    max-width: 650px;
  }
}

.popup {
  padding: 24px;
  min-width: fit-content;
  width: 100%;
  background: var(--tertiary-white);

  @media (width >=1024px) {
    padding: 48px;
  }

  &.interest-registered-popup {
    overflow-y: auto;
    min-height: auto;

    .popup__body {
      padding: 0;
    }
  }
}

.popup__icon {
  background-size: contain;
  margin-top: 0;
}

.popup__desc,
.popup__txn,
.popup__note {
  margin-bottom: 24px;
}

.popup__desc {
  max-width: 100%;

  a {
    color: var(--primary-blue-700);
  }
}

.pkg__copy {
  width: 24px;
  height: 24px;
  background-size: contain;
}

.popup__body {
  padding: 0;

  .close-button {
    &:before {
      content: '';
      top: 0;
      background-size: contain;
    }
  }

  .popup__title,
  .popup__desc,
  .popup__txn,
  .popup__note,
  .popup__txn-label,
  .popup__txn-id {
    color: var(--primary-black);
  }

  .popup__title {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      color: var(--primary-black);
    }
  }

  .popup__copy {
    background: url('/icons/copy_icon.svg') no-repeat center center;
    background-size: contain;
    display: flex;
    align-self: center;
    justify-self: center;
  }
}

.popup__txn {
  width: fit-content;
  padding: 12px 16px;
  background: var(--Gradients-Accent-Section-Bg-1, linear-gradient(228deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%));
  max-width: 100%;
}

.popup__disclaimer {
  color: var(--primary-black);

  p {
    font-size: var(--heading-font-20-mob-text);
    font-weight: var(--fw-400);
    line-height: var(--heading-lh-25-mob-text-small);
  }
}

.popup__download {
  background: url('/icons/download-blue.svg') no-repeat center center;
  background-size: contain;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.popup__img {
  display: none;
}

.popup__btn {
  color: var(--primary-blue-700);
  margin-bottom: 0;
  border: 1px solid var(--primary-blue-700);
}