/* add global styles that can be loaded post LCP here */

/* Global loading overlay (scripts/loader.js) styles live in styles/styles.css, not here —
   showLoader() can fire as early as a block's eager-phase decorate() (e.g.
   payment-response.js, to cover the pre-header/footer gap), which runs before this
   lazy-phase stylesheet loads. Styling it here would make it render unstyled/invisible for
   exactly the window it's meant to cover. */

/* Global SweetAlert2 restyle — ported from the classic AEM page's sitewide
   clientlib-site/_sweetalert.scss override. SweetAlert2 is only ever loaded post-interaction
   (form submits, PROCEED clicks, error paths), never above the fold, so this is safe to keep
   in the lazy stylesheet. Strips the library's own built-in ring/X-mark icon drawing (nested
   div/span children of .swal2-icon) and repaints the icon itself as a flat custom image,
   matching the classic page exactly instead of SweetAlert2's default outlined-ring icon. */
.swal2-icon div,
.swal2-icon span {
  all: unset !important;
  font-size: 0 !important;
}

.swal2-icon.swal2-error,
.swal2-icon.swal2-warning {
  background-image: url('/icons/swal-cross-error.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0 !important;
}

.swal2-icon.swal2-success {
  background-image: url('/icons/payment/thumbs-success.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0 !important;
}

.swal2-popup {
  width: 360px !important;
  aspect-ratio: 1 / 1;
  padding: 30px !important;
  background-color: #f5f5f5 !important;
}

.swal2-popup .swal2-title {
  color: #444 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.swal2-popup .swal2-confirm {
  width: 140px !important;
  height: 40px !important;
  background-color: #f04c23 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.swal2-popup .swal2-cancel,
.swal2-popup .swal2-deny {
  width: 140px !important;
  height: 40px !important;
  background-color: #fff !important;
  border: 1px solid #f04c23 !important;
  color: #f04c23 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

@media (width <= 649px) {
  .swal2-popup {
    padding: 20px !important;
  }
}