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

.cibil-form__wrapper {
  display: grid;

  grid-template-columns: 1fr;

  padding-block: 40px 80px;

  @media (width >= 768px) {
    grid-template-columns: 1fr 1fr;

    padding-block: 5% 8%;
  }

  .cibil-form__img {
    display: none;

    img {
      height: auto;

      width: 70%;
    }

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

  .cibil-form__content {
    .cibil-form__header {
      .cibil-form__header-title {
        :is(h1, h2, h3, h4, h5, h6, p) {
          font-size: var(--fs-22);

          font-weight: var(--fw-700);

          line-height: normal;

          color: #000;
        }
      }

      .cibil-form__header-description {
        font-size: var(--subscription-font-5-desc);

        color: var(--gray-600);

        width: 100%;

        line-height: var(--subscription-lh-5-desc-display);

        margin-top: 7px;

        @media (width >= 768px) {
          width: 50%;
        }
      }
    }

    .form-group {
      width: 100%;

      margin-top: 20px;

      @media (width >= 768px) {
        width: 70%;

        margin-top: 35px;
      }

      input[type='text'] {
        width: 100%;

        border: 0px;

        border-bottom: var(--top-search) solid 1px;

        border-radius: 0px;

        padding: 7px 0px;

        color: #000;

        font-size: var(--subscription-font-3-desc);

        line-height: normal;

        font-weight: var(--fw-500);

        &:focus {
          outline: none;
        }

        &::placeholder {
          color: var(--gray-600);

          font-size: var(--subscription-font-5-desc);

          font-weight: var(--fw-500);
        }
      }

      &.disclaimer--group {
        margin-top: 0;
      }

      .dob--label {
        display: block;

        color: var(--gray-600);

        font-size: var(--subscription-font-5-desc);

        font-weight: var(--fw-500);
      }

      .dob--fields {
        select {
          padding: 2px 16px 2px 4px;

          border: 0;

          border-bottom: var(--gray-200) solid 1px;

          font-size: var(--subscription-font-3-desc);

          font-weight: var(--fw-500);
        }
      }

      .disclaimer--label {
        display: inline-block;

        margin: 30px 0;

        color: var(--color-grey);

        font-size: var(--subscription-font-5-desc);

        padding-left: 35px;

        line-height: var(--subscription-lh-2-desc-display);

        position: relative;

        input[type='checkbox'] {
          position: absolute;

          top: 0;

          left: 0;

          height: 21px;

          width: 21px;

          background-color: var(--white);

          border-radius: 3px;

          border: var(--gray-600) solid 1px;

          @media (width >= 1200px) {
            width: 21px;

            height: 21px;
          }
        }
      }

      .field-error {
        color: var(--error-light-red);

        font-size: var(--subscription-font-5-desc);

        margin-top: 4px;

        line-height: var(--subscription-lh-2-desc-display);
      }
    }

    .form-footer {
      position: fixed;

      width: 100%;

      bottom: 0px;

      left: 0px;

      padding: 20px 0;

      box-shadow: 0px -2px 10px var(--sub-black-20);

      background: var(--white);

      z-index: 2;

      .form-footer--inner {
        display: grid;

        grid-template-columns: 30% 70%;

        @media (width >= 768px) {
          grid-template-columns: 1fr 1fr;
        }

        .form-footer-logo {
          img {
            width: 73px;

            height: auto;
          }
        }

        .submit-cibil {
          width: 100%;

          font-size: var(--subscription-font-h6);

          background-image: var(--orange-gradient);

          padding: 12px 50px;

          text-decoration: none;

          border-radius: 10px;

          border: 2px solid var(--color-orange);

          color: #000;

          font-weight: var(--fw-700);

          display: block;

          text-transform: uppercase;

          transition: 0.5s;

          &:disabled {
            background: var(--gray-200);

            color: var(--white);

            border: var(--gray-200) solid 2px;
          }

          @media (width >= 768px) {
            width: 70%;
          }
        }
      }
    }
  }
}

.cibil-form__error {
  display: grid;

  grid-template-columns: 1fr;

  padding-block: 40px 120px;

  @media (width >= 768px) {
    grid-template-columns: 1fr 1fr;

    padding-block: 5% 8%;
  }

  .cibil-form__error-img {
    img {
      height: auto;

      width: 100%;

      padding-inline: 30px;
    }
  }

  .cibil-form__error-content {
    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    @media (width >= 768px) {
      width: 70%;
    }

    .cibil-form__error-title {
      * {
        font-size: var(--subscription-font-h5);

        font-weight: var(--fw-700);

        line-height: normal;

        color: #000;

        margin: 0;
      }
    }

    .cibil-form__error-subtitle {
      margin-block: 10px;

      * {
        font-size: var(--subscription-font-1-desc);

        font-weight: var(--fw-400);

        line-height: normal;

        color: #000;

        margin: 0;
      }
    }

    .cibil-form__error-description {
      * {
        font-size: var(--subscription-font-3-desc);

        font-weight: var(--fw-400);

        line-height: normal;

        color: #000;

        margin: 0;
      }
    }
  }

  .form-footer {
    position: fixed;

    width: 100%;

    bottom: 0px;

    left: 0px;

    padding: 20px 0;

    box-shadow: 0px -2px 10px var(--sub-black-20);

    background: var(--white);

    z-index: 10;

    .form-footer--inner {
      display: grid;

      grid-template-columns: 30% 70%;

      @media (width >= 768px) {
        grid-template-columns: 1fr 1fr;
      }

      .form-footer-logo {
        img {
          width: 73px;

          height: auto;
        }
      }

      .home-link {
        width: 100%;

        font-size: var(--subscription-font-h6);

        background: var(--white);

        padding: 12px 50px;

        text-decoration: none;

        border-radius: 10px;

        border: 2px solid var(--color-orange);

        color: #000;

        font-weight: var(--fw-700);

        display: block;

        text-transform: uppercase;

        transition: 0.5s;

        text-align: center;

        @media (width >= 768px) {
          width: 70%;
        }
      }
    }
  }
}

.cibil-form__success {
  display: grid;

  grid-template-columns: 1fr;

  @media (width >= 768px) {
    grid-template-columns: 1fr 1fr;
  }

  .cibil-form__success-img {
    background: var(--cibil-bg);

    padding: 40px 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

    gap: 20px;

    img {
      height: auto;

      width: 60%;
    }

    .download-link {
      text-decoration: none;

      font-size: var(--subscription-font-h5);

      font-weight: var(--fw-700);

      color: var(--color-anchor);

      padding: 0;
    }

    .cibil-form__success-data {
      position: absolute;

      top: 54%;

      left: 50%;

      transform: translate(-50%, -50%);

      text-align: center;

      span {
        display: block;

        &.value {
          color: #000;

          font-size: 64px;

          font-weight: var(--fw-700);

          line-height: normal;
        }

        &.label {
          color: var(--brand-yellow);

          font-size: var(--subscription-font-h5);

          font-weight: var(--fw-700);

          line-height: normal;
        }
      }
    }
  }

  .cibil-form__success-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    @media (width >= 768px) {
      width: 70%;

      padding-left: 30px;
    }

    .cibil-form__success-title {
      margin-bottom: 15px;

      * {
        font-size: var(--subscription-font-h3);

        font-weight: var(--fw-700);

        line-height: normal;

        color: #000;

        margin: 0;
      }
    }

    .cibil-form__success-subtitle-two,
    .cibil-form__success-subtitle {
      * {
        font-size: var(--subscription-font-h5);

        font-weight: var(--fw-500);

        line-height: normal;

        color: #000;

        margin: 0;
      }
    }

    .cibil-form__success-description-two,
    .cibil-form__success-description {
      margin-top: 5px;

      * {
        font-size: var(--subscription-font-h6);

        font-weight: var(--fw-400);

        line-height: normal;

        color: #000;

        margin: 0;
      }
    }

    .cibil-form__success-subtitle-two {
      margin-top: 20px;
    }
  }

  .form-footer {
    position: fixed;

    width: 100%;

    bottom: 0px;

    left: 0px;

    padding: 20px 0;

    box-shadow: 0px -2px 10px var(--sub-black-20);

    background: var(--white);

    z-index: 10;

    .form-footer--inner {
      display: grid;

      grid-template-columns: 30% 70%;

      @media (width >= 768px) {
        grid-template-columns: 1fr 1fr;
      }

      .form-footer-logo {
        img {
          width: 73px;

          height: auto;
        }
      }

      .successLink-link {
        width: 100%;

        font-size: var(--subscription-font-h6);

        background-image: var(--orange-gradient);

        padding: 12px 50px;

        text-decoration: none;

        border-radius: 10px;

        border: 2px solid var(--color-orange);

        color: #000;

        font-weight: var(--fw-700);

        display: block;

        text-transform: uppercase;

        transition: 0.5s;

        text-align: center;

        @media (width >= 768px) {
          width: 70%;
        }
      }
    }
  }
}