/* Embedded Stripe checkout and branded full-payment action. */
.payment-panel .payment-primary-action {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 62px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(244, 217, 143, .9) !important;
  background: linear-gradient(118deg, #102f46 0%, #1c506f 42%, #a97b2c 100%) !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(12, 45, 66, .25), 0 0 0 1px rgba(255, 240, 193, .2) inset !important;
  font-weight: 750;
  letter-spacing: .045em;
  animation: devzPaymentPulse 2.8s ease-in-out infinite;
}
.payment-panel .payment-primary-action::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45% auto -45% -35%;
  width: 28%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: devzPaymentShine 3.6s ease-in-out infinite;
}
.payment-panel .payment-primary-action:hover {
  transform: translateY(-2px) scale(1.006) !important;
  background: linear-gradient(118deg, #173d58 0%, #286486 44%, #bd903b 100%) !important;
  box-shadow: 0 20px 44px rgba(12, 45, 66, .32), 0 0 0 1px rgba(255, 241, 195, .35) inset !important;
}
.payment-panel .payment-primary-action:disabled {
  cursor: wait;
  opacity: .72;
  animation: none;
}
.payment-lock {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  font-size: 16px;
}
.payment-primary-action b { font-size: 1.1em; transition: transform .25s ease; }
.payment-primary-action:hover b { transform: translateX(4px); }
.embedded-checkout[hidden] { display: none !important; }
.embedded-checkout {
  margin-top: 18px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(23, 50, 74, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 36px rgba(14, 36, 51, .11);
}
.wallet-checkout[hidden], .payment-separator[hidden] { display: none !important; }
.payment-choice-label {
  margin: 0 0 10px;
  color: #17324a !important;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.payment-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #5c6972;
  font-size: .76rem;
}
.payment-separator::before, .payment-separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(23, 50, 74, .17);
}
#confirmStripePayment { margin-top: 18px; }
.payment-element-error {
  min-height: 1.2em;
  margin: 10px 0 0 !important;
  color: #9a2d26 !important;
  font-size: .84rem;
}
@keyframes devzPaymentShine {
  0%, 34% { left: -35%; opacity: 0; }
  48% { opacity: 1; }
  66%, 100% { left: 120%; opacity: 0; }
}
@keyframes devzPaymentPulse {
  0%, 100% { filter: drop-shadow(0 8px 12px rgba(12,45,66,.12)); }
  50% { filter: drop-shadow(0 11px 16px rgba(169,123,44,.25)); }
}
@media (max-width: 680px) {
  .payment-panel .payment-primary-action {
    min-height: 64px;
    padding: 8px 14px !important;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 14px;
    gap: 8px;
    font-size: .875rem !important;
    letter-spacing: .01em !important;
  }
  #quoteForm .payment-primary-action .stripe-button-mark {
    width: 48px;
    height: auto;
    max-width: 100%;
    justify-self: start;
  }
  #quoteForm .payment-primary-action span {
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: normal;
    text-align: center;
    flex-shrink: 1;
  }
  #quoteForm .payment-primary-action b { justify-self: end; }
  .payment-lock { width: 22px; height: 22px; }
  .embedded-checkout { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .payment-panel .payment-primary-action,
  .payment-panel .payment-primary-action::before { animation: none !important; }
}

/* Keep Stripe branding independent of marketing button themes. */
#quoteForm #bookAndPay,
#quoteForm #confirmStripePayment {
  background: linear-gradient(110deg, #2456d8, #4f64ed) !important;
  color: #fff !important;
  border-color: #637ef0 !important;
  text-shadow: none !important;
}
#quoteForm #bookAndPay:hover,
#quoteForm #confirmStripePayment:hover { background: #214abb !important; }
#quoteForm .payment-panel [hidden] { display: none !important; }
#quoteForm .stripe-button-mark { width: 68px; height: 31px; object-fit: contain; flex: 0 0 auto; }
#quoteForm #paymentElementError { color: #9a2d26 !important; }