.merchant-payment-request-card {
  --horizontal-padding: var(--boxel-sp-xl);
  --section-vertical-padding: var(--boxel-sp-xl);

  max-width: 720px;
  padding: 0 var(--horizontal-padding);
  color: var(--boxel-dark);
}

.merchant-payment-request-card__section {
  padding: var(--section-vertical-padding) 0;
}

/* section for getting people to download card wallet, desktop */
.merchant-payment-request-card__get-card-wallet--desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--boxel-sp-sm);
  border-bottom: 1px solid var(--boxel-light-300);
  font-size: var(--boxel-font-size);
  font-weight: 600;
  line-height: calc(22 / 16);
}

.merchant-payment-request-card__get-card-wallet--desktop .merchant-payment-request-card__card-wallet {
  display: flex;
  align-items: center;
  gap: var(--boxel-sp-sm);
}

.merchant-payment-request-card__get-card-wallet--desktop .merchant-payment-request-card__card-wallet-icon {
  flex-shrink: 0;
}

.merchant-payment-request-card__get-card-wallet--desktop .merchant-payment-request-card__testflight-link {
  --icon-color: currentColor;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--boxel-sp-xs);
}

/* section for getting people to download card wallet, mobile */
.merchant-payment-request-card__get-card-wallet--mobile {
  display: none;
  border-bottom: 1px solid var(--boxel-light-300);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: calc(19 / 14);
}

.merchant-payment-request-card__get-card-wallet--mobile .merchant-payment-request-card__card-wallet {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content auto;
  grid-template-areas:
    "icon name"
    "icon cta";
  gap: 0 var(--boxel-sp-xs);
}

.merchant-payment-request-card__get-card-wallet--mobile .merchant-payment-request-card__card-wallet-text {
  font-weight: 700;
}

.merchant-payment-request-card__get-card-wallet--mobile .merchant-payment-request-card__card-wallet-icon {
  grid-area: icon;
  flex-shrink: 0;
}

@media only screen and (max-width: 480px) {
  .merchant-payment-request-card {
    --horizontal-padding: var(--boxel-sp-lg);
    --section-vertical-padding: var(--boxel-sp-lg);
  }

  .merchant-payment-request-card__get-card-wallet--desktop {
    display: none;
  }

  .merchant-payment-request-card__get-card-wallet--mobile {
    display: block;
  }
}