[data-payment-card-action][data-payment-card-action] {
  --payment-card-gold: #c49a43;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: clamp(18rem, 30vw, 23rem);
  max-width: 100%;
  aspect-ratio: 1120 / 610;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: clamp(1.25rem, 2.2vw, 2.25rem);
  color: #171919;
  background: transparent url("../payment/pay-securely-card-shell.svg") center / 100% 100% no-repeat;
  box-shadow: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transform: translateZ(0);
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 180ms ease;
}

[data-payment-card-action][hidden] {
  display: none !important;
}

.payment-card-action__label,
.payment-card-action__meta {
  position: absolute;
  z-index: 1;
  left: 10.4%;
  max-width: 84%;
  pointer-events: none;
}

.payment-card-action__methods {
  position: absolute;
  z-index: 1;
  top: 12.25%;
  right: 8.75%;
  max-width: 58%;
  min-height: 8%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.28rem, 0.65vw, 0.5rem);
  pointer-events: none;
}

.payment-card-action__methods:empty {
  display: none;
}

.payment-card-action__methods img {
  display: block;
  width: auto;
  width: clamp(1.05rem, 2.35vw, 1.55rem);
  max-width: none;
  height: clamp(1.05rem, 2.35vw, 1.55rem);
  object-fit: contain;
}

.payment-card-action__methods img[data-payment-method="apple-pay"] {
  width: clamp(1rem, 2.25vw, 1.5rem);
  height: clamp(1rem, 2.25vw, 1.5rem);
}

.payment-card-action__label {
  top: 36%;
  overflow: hidden;
  color: #171919;
  font: 400 clamp(1.8rem, 14cqw, 3.15rem)/0.98 Georgia, "Times New Roman", serif;
  letter-spacing: -0.055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-card-action__meta {
  top: 60.5%;
  overflow: hidden;
  color: #171919;
  font: 500 clamp(0.7rem, 4.25cqw, 1rem)/1.1 Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-payment-card-action]:hover {
  filter: drop-shadow(0 1.15rem 1.25rem rgba(17, 19, 19, 0.2));
  transform: translateY(-4px) rotate(-0.35deg);
}

[data-payment-card-action]:active {
  filter: drop-shadow(0 0.45rem 0.65rem rgba(17, 19, 19, 0.16));
  transform: translateY(1px) scale(0.975);
  transition-duration: 80ms;
}

[data-payment-card-action]:focus-visible {
  outline: 3px solid var(--payment-card-gold);
  outline-offset: 4px;
}

[data-payment-card-action]:disabled,
[data-payment-card-action][aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(0.65);
  opacity: 0.58;
  transform: none;
}

[data-payment-card-action][aria-busy="true"] {
  cursor: wait;
}

@media (max-width: 520px) {
  [data-payment-card-action][data-payment-card-action] {
    width: min(100%, 21rem);
    align-self: flex-start;
    border-radius: 1.35rem;
  }

  .payment-card-action__methods {
    gap: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-payment-card-action] {
    transition-duration: 0.01ms;
  }

  [data-payment-card-action]:hover,
  [data-payment-card-action]:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  [data-payment-card-action] {
    border: 2px solid ButtonText;
    border-radius: 1rem;
    color: ButtonText;
    background: ButtonFace;
    box-shadow: none;
  }

  .payment-card-action__label,
  .payment-card-action__meta,
  .payment-card-action__methods {
    color: ButtonText;
  }

  .payment-card-action__methods {
    display: none;
  }
}