.credit-card-list {
  margin-bottom: 12px;
  margin-top: 0;

  .credit-card-item {
    padding: 16px;

    .credit-card-type-image {
      width: 46px;
      height: 32px;
      object-fit: contain;
      border-radius: 4px;
      border: 1px solid var(--Gray-100, #F2F4F7);
      background: var(--Base-White, #FFF);
      padding: 4px;
      display: block;
    }

    .credit-card-name {
      color: var(--Gray-700, #344054);
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
    }

  }


}

.manage-credit-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;

  .manage-credit-card {
    width: 100%;
    cursor: pointer;
    border-radius: 12px;
    position: relative;


    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      border: 1px solid var(--Gray-200, #EAECF0);
    }


    .remove-card-icon {
      color: #D92D20;
      font-size: 24px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
  }
}

.credit-card-add-button {
  height: auto;
  padding: 16px;
  width: 100%;
  border-radius: 12px;
  color: var(--Gray-700, #344054);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}


.text-active-color {
  color: var(--theme-color, #7F56D9) !important;
}

.credit-card-manage-button {
  margin-top: 20px;
  color: var(--theme-color, #6941C6);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  cursor: pointer;
}