/* Megatix draws its own panel inside the full-viewport frame. */
.checkout {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.checkout::backdrop { background: rgb(25 33 39 / 70%); }
.checkout iframe { display: block; width: 100%; height: 100%; border: 0; color-scheme: light; }
.checkout-help {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #20262c;
  color: #fff;
  font: 400 12px/1.3 system-ui, sans-serif;
}
.checkout-help a, .checkout-close { padding: 6px 2px; text-decoration: underline; text-underline-offset: 2px; }
.checkout-close { background: transparent; color: inherit; border: 0; cursor: pointer; }
.checkout[data-loaded] .checkout-help:not(:focus-within) {
  clip-path: inset(50%);
  pointer-events: none;
}

.checkout:not([data-loaded]) iframe { opacity: 0; pointer-events: none; }
.checkout[data-loaded] .checkout-loading { display: none; }

.checkout-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.checkout-loading span {
  position: absolute;
  clip-path: inset(50%);
  white-space: nowrap;
}
.checkout-loading::before, .checkout-loading::after {
  content: "";
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: 60px;
  aspect-ratio: 1;
  border: 4px solid rgb(255 255 255 / 75%);
  border-radius: 50%;
}
.checkout-loading::after {
  animation: checkout-ring 1.2s ease-out infinite;
}
@keyframes checkout-ring {
  from { transform: scale(1); opacity: .5; }
  to { transform: scale(1.55); opacity: 0; }
}

.checkout:has(.checkout-loading):not([data-loaded]) .checkout-help:not(:focus-within) {
  animation: checkout-show-help 0s 4s backwards;
}
@keyframes checkout-show-help {
  from { clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-loading::after { animation: none; transform: scale(1.35); opacity: .18; }
}