.crypto-payment-unavailable {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 0.5rem;
  cursor: not-allowed;
}

.crypto-payment-unavailable > button {
  width: 100%;
  pointer-events: none;
}

.crypto-payment-unavailable:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.crypto-payment-unavailable-notice {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 50;
  width: min(19rem, calc(100vw - 3rem));
  padding: 0.875rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  cursor: default;
}

.crypto-payment-unavailable-notice strong,
.crypto-payment-unavailable-notice span {
  display: block;
}

.crypto-payment-unavailable-notice strong {
  margin-bottom: 0.25rem;
}

.crypto-payment-unavailable:hover > .crypto-payment-unavailable-notice,
.crypto-payment-unavailable:focus-within > .crypto-payment-unavailable-notice {
  display: block;
}

@media (min-width: 640px) {
  .crypto-payment-unavailable-notice {
    left: auto;
    right: 0;
  }
}