.subscription-plans-bg {
  background-image:
    linear-gradient(270.23deg, #FEFFFF -1.87%, rgba(147, 202, 255, 0.15) 8%),
    url('../img/auth/subscription-plan-bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}


.input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input-wrapper input::placeholder {
  color: #6c757d;
}

.input-wrapper:has(input:placeholder-shown)::after {
  content: "*";
  position: absolute;
  left: calc(0.75rem + 1ch * var(--ph-length));
  top: 50%;
  transform: translateY(-50%);
  color: red;
  pointer-events: none;
}



.text-area-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.text-area-wrapper input::placeholder {
  color: #6c757d;
}

.text-area-wrapper:has(input:placeholder-shown)::after {
  content: "*";
  position: absolute;
  left: calc(0.75rem + 1ch * var(--ph-length));
  top: 30%;
  transform: translateY(-50%);
  color: red;
  pointer-events: none;
}
.card.bg-primary.text-white * {
  color: #fff !important;
}
.popular-badge{
color: #000 !important;
background-color: #fff;
}


.sticky-bottom-btn-form {
  height: 100vh;
  display: flex;
  align-items: stretch;
}

#formScrollContainer {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
}

.ps-content {
  padding-bottom: 100px;
}




@media (min-width: 992px) {
  .sticky-bottom-btn-form {
    overflow-y: hidden;
  }
}


/* @media (min-width: 1200px) { */
  .sticky-desktop {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 1rem 0;
    z-index: 10;
  }


/* } */



.form-scroll-container {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}


.form-scroll-container .row {
  padding-bottom: 100px;
}

.sticky-btn-container {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: #fff;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
}

#vertical-scroll {
  max-height: calc(100vh - 220px);
  overflow: hidden;
}


.plan-wrapper {
    position: relative;
}

.cap-card {
 position: absolute;
    top: -53px;
    left: 50%;
    transform: translateX(-50%);
    height: 65px;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.content-card {
      height: 100%;
  min-height: 500px;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}
.custom-radius{
    border-radius: 1rem !important;
}




@media (max-width: 991px) {
  #vertical-scroll {
    max-height: calc(100vh - 180px);
  }
}

@media (max-width: 575px) {
  #vertical-scroll {
    max-height: calc(100vh - 400px);
  }
}



.broker-subscription-page #vertical-scroll {
  max-height: calc(100vh - 0px);
  overflow: auto;
}

@media (max-width: 991px) {
  .broker-subscription-page #vertical-scroll {
    max-height: none;
    overflow: visible;
  }


}


@media (max-width: 575px) {
 .broker-signup-form  #vertical-scroll {
    max-height: calc(100vh - 10px);
  }

  .client-signup-form #vertical-scroll {
    max-height: calc(100vh - 10px);
  }

  .client-professional-details #vertical-scroll {
    max-height: calc(100vh - 10px);
  }
  .plans-card{
    margin: 60px 0px 20px 0px;
  }

  .subscription-plans-bg {
    background-size: cover;       /* fill container */
    background-position: bottom center; /* image anchored at bottom */
  }

}



@media (max-width: 991px) {
  .broker-signup-form #vertical-scroll {
    max-height: calc(100vh - 100px);
  }

  .client-signup-form #vertical-scroll {
    max-height: calc(100vh - 100px);
  }
    .plans-card{
    margin: 60px 0px 20px 0px;
  }
.subscription-plans-bg {
      background-image:
   linear-gradient(270.23deg, rgba(254, 255, 255, 0.8) -1.87%, rgba(147, 202, 255, 0.15) 2%)
    url('../img/auth/subscription-plan-bg.png');
    background-size: contain;
    background-position: bottom; /* adjust so key part of image shows */
    background-repeat: no-repeat;
  }
}

@media (max-width: 1024px) {

}



.form-label {
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.form-label .text-danger {
  font-size: 1rem;
  line-height: 1;
}
.modal-dialog-scrollable .modal-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}