app-otp {
  ion-content {
    ion-card {
      border-radius: 0 0 1.563rem 1.563rem;
      margin: var(--ion-margin-0);
      background: #F3FAFF url(/assets/images/circle-bg.svg) no-repeat bottom 1.875rem center;
      box-shadow: none;
      height: 12.563rem;
      text-align: var(--ion-text-align-center);
      padding-top: 6rem;

      ion-card-header {
        padding: var(--ion-padding-0);

        ion-card-title {
          font-size: var(--ion-font-size-20);
          text-transform: uppercase;
          margin-bottom: 0.55rem;
        }

        ion-card-subtitle {
          font-size: 1.063rem;
          color: #FF6331;

          span {
            color: var(--ion-color);
          }
        }
      }
    }

    text-align: center;

    .otp {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--ion-padding-15);
      flex-direction: column;

      img {
        margin: var(--ion-margin-20);
        width: 75%;
      }

      ion-item {
        width: 100%;
        margin-bottom: var(--ion-margin-15);
        padding: var(--ion-padding-0);

        &.otp-time {
          margin-top: var(--ion-margin-5);
          justify-content: space-between;
          --min-height: auto;

          p {
            margin: var(--ion-margin-0);
          }
        }
      }

      .resend-otp {
        text-align: right;
        margin: 0 var(--ion-margin-30) var(--ion-margin-15) 0;
        color: var(--ion-color);
        font-size: 12px;
        width: 100%;

        &.disable {
          pointer-events: none;
          opacity: 0.5;
        }
      }
    }

    p {
      text-align: var(--ion-text-align-center);
      font-size: var(--ion-font-size-14);

      &.signing-btn {
        padding: 0 var(--ion-padding-15);
        color: var(--ion-color);
      }
    }
  }
}