#checkout-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(18, 35, 59, .55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 20px;
}
#checkout-modal-backdrop.open { display: flex; animation: checkout-fade .15s ease-out; }
@keyframes checkout-fade { from { opacity: 0; } to { opacity: 1; } }

#checkout-modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  position: relative; box-shadow: 0 24px 60px -12px rgba(18,35,59,.35);
  animation: checkout-pop .18s ease-out;
}
@keyframes checkout-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

#checkout-modal-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: #f2f4f7; color: #4b5768; font-size: 18px; line-height: 1; cursor: pointer;
  z-index: 1; transition: background .12s;
}
#checkout-modal-close:hover { background: #e6e9ee; }

#checkout-embed { min-height: 420px; padding: 8px; }
#checkout-embed:empty::before {
  content: ""; display: block; height: 420px;
  background: linear-gradient(90deg, #f2f4f7 25%, #e9ecf0 37%, #f2f4f7 63%);
  background-size: 400% 100%; animation: checkout-skeleton 1.4s ease infinite; border-radius: 12px;
}
@keyframes checkout-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }