/**
 * SC × SEB modal bridge — minimal styles.
 * Modal grows with its content; one scroll only (the modal's outer
 * scroll, native to Bootstrap, when the dialog exceeds the viewport).
 */

.js-payment-option-form:has(#paymentElementForm) {
  display: none !important;
}

/* Lock the modal to the viewport — at_auros theme overrides
   bootstrap's position:fixed on .modal so the dialog renders above
   the user's scroll position. */
#velsof_payment_dialog {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10500 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: rgba(0, 0, 0, 0.5);
}

/* Lock the page behind the modal so we get one scroll, not two. */
body.seb-modal-open {
  overflow: hidden !important;
}

/* EveryPay caps the inner card form at ~440px via their own iframe-side
   CSS (cross-origin, can't override). Sizing the modal to roughly match
   that width keeps the layout tight instead of leaving empty space. */
#velsof_payment_dialog .modal-dialog {
  max-width: none !important;
  width: 92vw !important;
  margin: 30px auto !important;
}

@media (min-width: 768px) {
  #velsof_payment_dialog .modal-dialog {
    width: 560px !important;
  }
}

/* Compact header: yellow strip with payment method title (JS fills
   it from the selected radio's label) and a plain X on the right. */
#velsof_payment_dialog .pay-modal-heading .payment-icon {
  display: none !important;
}
#velsof_payment_dialog .pay-modal-heading {
  display: block !important;
  position: relative !important;
  padding: 14px 50px !important;
  background: #f5c518 !important;
  border: none !important;
  margin: 0 !important;
  text-align: center !important;
}
/* Suppress any decorative line SC's CSS adds via pseudo-element / hr. */
#velsof_payment_dialog .pay-modal-heading::before,
#velsof_payment_dialog .pay-modal-heading::after,
#velsof_payment_dialog .payment-heading::before,
#velsof_payment_dialog .payment-heading::after,
#velsof_payment_dialog .pay-modal-heading h4::before,
#velsof_payment_dialog .pay-modal-heading h4::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}
#velsof_payment_dialog .pay-modal-heading hr,
#velsof_payment_dialog .velsof_title_section hr {
  display: none !important;
}
#velsof_payment_dialog .pay-modal-heading .payment-heading {
  display: block !important;
  border: none !important;
}
#velsof_payment_dialog .pay-modal-heading .payment-heading h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #222 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  border: none !important;
  text-decoration: none !important;
  background: none !important;
}
#velsof_payment_dialog .pay-modal-heading .close {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: #222 !important;
  opacity: 0.7 !important;
  text-shadow: none !important;
  padding: 4px !important;
  margin: 0 !important;
  cursor: pointer !important;
}
#velsof_payment_dialog .pay-modal-heading .close:hover {
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
}

/* Modal-content / body grow with content — no caps, no inner scroll. */
#velsof_payment_dialog .modal-content {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
}
#velsof_payment_dialog .modal-body {
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
#velsof_payment_dialog .velsof_content_section {
  padding: 32px 24px 16px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
#velsof_payment_dialog .velsof_content_section > p:first-child {
  display: none !important;
}

/* EveryPay iframe: SDK sizes via postMessage as content loads.
   No min-height (would leave a void during initial load); just make
   sure no ancestor clips it. */
#velsof_payment_dialog #sebpaymentgatewayPaymentElement {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
#velsof_payment_dialog #sebpaymentgatewayPaymentElement iframe {
  width: 100% !important;
  border: 0 !important;
  display: block !important;
  max-height: none !important;
}

/* Footer + Pay button. */
#velsof_payment_dialog .modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid #eee !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}
#velsof_payment_dialog .modal-footer .btn-success {
  background: #f5c518 !important;
  border-color: #f5c518 !important;
  color: #222 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 12px 36px !important;
  border-radius: 4px !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}
#velsof_payment_dialog .modal-footer .btn-success:hover {
  background: #e0b415 !important;
  border-color: #e0b415 !important;
  color: #222 !important;
}