/*
 * Secure Booking payment step (payment-step.js): the one-tap Apple Pay /
 * Google Pay button and its divider, the Payment Element's loading
 * placeholder, and the trust copy under Pay. Kept out of secure-booking.css,
 * which is already past the file-size review point.
 */

.sb-express {
  margin: 0 0 18px;
}

/* Stripe sizes the button iframe; the holder only needs to span the column. */
.sb-express-button {
  width: 100%;
  min-height: 48px;
}

.sb-express-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--nc-ink);
}

.sb-express-divider::before,
.sb-express-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nc-line);
}

/* Roughly the card form's drawn height, so Pay sits where it will end up. */
.sb-pe-loading {
  min-height: 300px;
  border-radius: var(--nc-radius-field);
  background: linear-gradient(90deg, var(--nc-vellum) 0%, #fbf6ea 50%, var(--nc-vellum) 100%);
  background-size: 200% 100%;
  animation: sb-shimmer 1.4s ease-in-out infinite;
}

@keyframes sb-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-pe-loading {
    animation: none;
  }
}

.sb-pay-trust {
  margin: 14px 2px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nc-ink);
}

.sb-pay-trust p {
  margin: 0 0 4px;
}

.sb-pay-trust a {
  color: var(--nc-terracotta);
  font-weight: 700;
  white-space: nowrap;
}