.custom-calculator-card {

  .progressbar-header-wrapper {
    margin-bottom: 40px;

    @media (max-width: 991.98px) {
      margin-bottom: 24px;
    }
  }

  .progress-bar-calculator {
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: clamp(12px, 4vw, 24px) clamp(16px, 6vw, 40px);
    display: flex;
    gap: 1rem;
    flex-direction: column;
  }

  &__heading {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #000000;
    font-family: var(--font-bold);
    font-weight: 500;
    margin-bottom: 1rem;
  }

  &__sections-container {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }

  &__slider-fields-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-sizing: border-box;
  }

  &__slider-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2rem;

    @media (min-width: 1200px) {
      width: 140% !important;
    }
  }

  .slider-container input {
    width: 100%;
  }

  .slider-field-name {
    margin: 0;
    line-height: 1.5;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 18px;
    font-family: var(--font-semi-bold);
    font-weight: 600;
    color: #094771;
  }

  .slider-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__invest-btn-section {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__invest-btn {
    text-decoration: none;
  }

  &__graph-section {
    padding: 12px 0px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 490px;
    width: 100%;

    @media (min-width: 992px) and (max-width: 1200px) {
      max-width: 100%;
    }


    @media (max-width: 991.98px) {
      max-width: 100%;
    }

    .graph-circle-container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .graph-desc-field {
    display: flex;
    gap: 12px;
    align-items: center;
    box-sizing: border-box;
    font-size: 16px;

    .custom-colored-circle-right,
    .custom-colored-circle-left {
      height: 16px;
      width: 16px;
      border-radius: 100%;
    }

    .custom-colored-circle-right {
      background-color: var(--primary-blue);
    }

    .custom-colored-circle-left {
      background-color: #dbe7fd;
    }

    .desc-name {
      font-weight: 500;
    }
  }

  &__graph-desc {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  &__graph-field {
    display: flex;
    gap: 24px;
    justify-content: space-between;
  }

  &__graph-fields-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    width: auto;
  }

  &__graph-field-name,
  &__graph-field-amount {
    font-weight: 500;
  }

  &__graph-field-amount {
    text-align: right;
  }

  .custom-calculator-card__graph-field:last-child {

    .custom-calculator-card__graph-field-name,
    .custom-calculator-card__graph-field-amount {
      font-weight: 600;
      font-family: var(--font-semi-bold);
    }

    .custom-calculator-card__graph-field-name {
      font-family: var(--font-semi-bold);
    }
  }

  &__horizontal-line {
    border-top: 0.2px solid rgb(194, 192, 192);
  }

  &__vertical-line {
    border-left: 0.2px solid rgb(202, 201, 201);
    margin-bottom: 100px;
  }

  .bandhan-input-container.preClass input {
    padding-right: 1.5rem;
  }
}

.circle {
  width: 216px;
  height: 216px;
  border-radius: 50%;
  background: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.3s ease;
  background: var(--neutral-lightBgGray, #e9ecef);
}

.circle::before {
  content: "";
  width: 170px;
  height: 170px;
  background: var(--white);
  border-radius: 50%;
  position: absolute;
  z-index: 1;
}

/* Progress visualization styles */
.circle[data-progress] {
  background: conic-gradient(#3b79d7 0deg var(--progress-percentage, 0deg),
      #dbe7fd var(--progress-percentage, 0deg) 360deg) !important;
}

/* Remove the percentage text overlay */
/* .circle::after {
  content: attr(data-progress) "%";
  position: absolute;
  z-index: 2;
  font-size: 24px;
  font-weight: 600;
  color: var(--primary-blue, #007bff);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
} */

.pre-ip {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.post-ip {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.form-range {
  -webkit-appearance: none;
  margin-top: 16px;
  width: 100%;
  height: 11px;
  background: var(--neutral-lightBgGray);
  border-radius: 4px;
  outline: none;
}

.form-range::-webkit-slider-runnable-track {
  height: 11px;
  background: #dbe7fd;
  border-radius: 12px;
}

.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #3b79d7;
  border-radius: 50%;
  cursor: pointer;
}


.form-range::-moz-range-track {
  height: 6px;
  background: linear-gradient(to right,
      var(--primary-blue),
      var(--primary-blue));
  border-radius: 4px;
}

.form-range::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--primary-blue);
  border: 2px solid var(--primary-blue);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.form-range::-moz-range-thumb:hover {
  transform: scale(1.1);
}

@media (max-width: 1020px) {
  .custom-calculator-card {
    width: 100%;
    max-width: none;

    &__sections-container {
      flex-direction: column-reverse;
    }

    &__vertical-line {
      border-left: none;
      border-top: 0.2px solid rgb(194, 192, 192);
      width: 100%;
      height: 0;
      margin: 0;
    }

    .slider-field {
      min-width: auto;
    }
  }
}

@media (max-width: 410px) {
  .slider-field {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (min-width: 1020px) and (max-width: 1200px) {
  .custom-calculator-card__graph-desc {
    flex-direction: column;
  }

  .custom-calculator-card__vertical-line {
    margin-bottom: 50px;
  }
}

/* Error styling for calculator validation */
.error-calculator {
  color: #E52D12;
  font-size: 16px;
  margin-top: 5px;
  font-weight: 500;
  animation: fadeIn 0.3s ease-in;
  position: absolute;
  left: 0;
  bottom: -25px;
  font-family: var(--font-body);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Input validation styles */
.bandhan-input-container__element.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  font-family: var(--font-semi-bold);
}

.bandhan-input-container__element:focus.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

@media (min-width: 1200px) {
  .custom-calculator-card.container {
    max-width: 1140px !important;
  }
}

.custom-calculator-card__graph-field-name {
  font-family: var(--font-medium);
  color: #094771;
}

.custom-calculator-card__graph-field-amount {
  font-family: var(--font-medium);
  color: #094771 !important;
}

.custom-calculator-card .graph-desc-field .desc-name {
  font-family: var(--font-medium) !important;
  font-size: 18px !important;
  color: #094771 !important;
}

.bandhan-input-container {
  max-width: 178px !important;
}

.slider-container {
  position: relative;
}

.custom-calculator-card__invest-btn {
  height: 64px !important;
  padding: 0 2.5rem !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  border: none !important;
  background-color: #153050 !important;
  border-radius: 8px !important;
  box-shadow: 0 9px 17px 0 rgba(38, 133, 245, 0.28) !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 22px;
  font-family: var(--font-bold);

  span {
    display: flex;
    align-items: center;
    height: 97%;
    padding: 0;
    margin: 0;
  }
}

.custom-calculator-card__invest-btn::after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 1;
}

.custom-calculator-card__invest-btn:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

@media (max-width: 991.98px) {
  .custom-calculator-card__heading {
    font-size: 1.25rem;
    line-height: 1.5;
    text-align: center;
  }

  .custom-calculator-card__sections-container {
    flex-direction: column;
  }

  .custom-calculator-card .slider-field-name {
    font-size: 16px;
    font-weight: 600;
  }

  .custom-calculator-card .slider-field {
    flex-direction: column;
    justify-content: start;
    align-items: start;
    row-gap: 0.5rem;
  }

  .bandhan-input-container {
    width: 100%;
    max-width: 100% !important;
  }

  .custom-calculator-card .slider-container:first-child .slider-field input {
    padding-right: 1.5rem;
  }

  .custom-calculator-card .slider-container input {
    width: 100%;
    max-width: 100%;
  }

  .bandhan-input-container .pre-tag {
    left: 40px;
  }

  .custom-calculator-card__invest-btn {
    padding-left: 24px !important;
    padding-right: 24px !important;
    height: 48px !important;

    span {
      font-size: 16px;
    }
  }

  .custom-calculator-card__vertical-line {
    display: none;
  }

  .custom-calculator-card .graph-desc-field .desc-name {
    font-size: 16px !important;
  }

  .custom-calculator-card.container {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 24px;
    padding-right: 24px !important;
    width: 100%;
    max-width: 95%;
    min-width: unset !important;
  }
}

@media (max-width: 574.98px) {
  .custom-calculator-card__graph-desc {
    flex-direction: column;
    gap: 3px;
  }

  .custom-calculator-card.container {
    max-width: 90%;
  }
}

.ulip-calculator__description {
  text-align: center;
  font-size: 1.125rem;
  color: #094771;
  font-family: var(--font-medium);
  line-height: 1.5;
  box-sizing: border-box;
  font-weight: 500;
  margin: 0;
  padding: 0;
  margin-bottom: 16px;

  @media (max-width: 767.98px) {
    font-size: 1rem;
  }

  p {
    text-align: center;
    font-size: 1.125rem;
    color: #094771;
    font-family: var(--font-medium);
    line-height: 1.5;
    box-sizing: border-box;
    font-weight: 500;
    margin: 0;
    padding: 0;
    margin-bottom: 0.875rem;

    @media (max-width: 767.98px) {
      font-size: 1rem;
    }
  }
}