@use 'payment-panel' as payment-panel;

@include payment-panel.host;

.payment-panel {
  @include payment-panel.card;

  &__account {
    width: 100%;
    display: grid;
    gap: 0.75rem;
    color: #7a7a7a;
    font-size: 12px;
  }

  &__request {
    width: 100%;
    display: grid;
    gap: 0.75rem;
    text-align: left;
  }

  &__description {
    margin: 0;
    color: #6f6f6f;
    font-size: 0.85rem;
    line-height: 1.4;
  }

  &__label {
    margin-bottom: -0.35rem;
    color: #5e5e5e;
    font-size: 0.8rem;
    font-weight: 500;
  }

  &__error {
    color: var(--bs-danger, #dc3545);
    font-size: 0.78rem;
  }

  &__eyebrow {
    margin: 0;
    color: #838383;
    font-size: 12px;
    font-weight: 325;
    letter-spacing: 0.06em;
  }
}

.payment-detail {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 0.35rem;
  align-items: center;
  font-size: 12px;

  &--copy {
    grid-template-columns: auto auto auto;
  }

  &__label {
    color: #8a8a8a;
    font-weight: 325;
  }

  &__value {
    color: #5e5e5e;
    font-weight: 500;
  }

  &__feedback {
    display: block;
    margin-top: -0.25rem;
    color: var(--tenant-primary, #6376f3);
    font-size: 0.78rem;
    font-weight: 700;
  }
}
