@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; color: #0f172a; }
.btn-primary { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; font-size: 0.75rem; background: #ef4444; color: white; border-radius: 0.75rem; padding: 0.75rem 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3); background: #dc2626; }
.card-glass { background: white; border: 1px solid #e2e8f0; border-radius: 1.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); }
.input-field { font-size: 0.85rem; background: #f1f5f9; border-radius: 0.75rem; padding: 0.85rem 1rem; width: 100%; border: 2px solid transparent; transition: all 0.2s; font-weight: 600; }
.input-field:focus { background: white; border-color: #ef4444; outline: none; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide { animation: slideUp 0.3s ease-out forwards; }
.registered-users-card { max-height: min(72vh, 760px); display: flex; flex-direction: column; min-height: 0; }
.registered-users-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.checkout-card { overflow: hidden; }
.checkout-title { min-width: 0; }
.checkout-product-label,
.checkout-id-label { overflow-wrap: anywhere; word-break: break-word; }
.checkout-submit-button { white-space: normal; text-align: center; }
@media (max-width: 640px) {
    .registered-users-card { max-height: calc(100vh - 7rem); }
    .checkout-screen.animate-slide { animation: none; transform: none !important; }
    .checkout-screen { padding-top: 0.25rem; padding-bottom: calc(6.75rem + env(safe-area-inset-bottom)); }
    .checkout-card { overflow: visible; border-radius: 1.25rem; }
    .checkout-header { flex-direction: column; align-items: stretch; gap: 0.85rem; padding: 1rem; }
    .checkout-title { width: 100%; min-width: 0; }
    .checkout-actions { width: 100%; flex-shrink: 1; justify-content: stretch; align-items: stretch; }
    .checkout-actions > button { flex: 1 1 0; min-width: 0; min-height: 2.75rem; }
    .checkout-actions > .btn-primary { min-height: 3rem; padding-left: 1rem; padding-right: 1rem; }
    .checkout-form { padding: 1rem; padding-bottom: 1.25rem; }
    .checkout-summary-row { align-items: flex-start; }
    .checkout-summary-row > span:first-child { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
    .checkout-submit-bar { align-items: stretch; gap: 1rem; padding: 1rem; }
    .checkout-submit-button { position: fixed; left: 1rem; right: 1rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 90; width: auto; min-height: 3.25rem; padding-left: 1rem; padding-right: 1rem; box-shadow: 0 10px 20px rgba(239, 68, 68, 0.22); }
}
@media (max-width: 420px) {
    .checkout-actions { flex-direction: column; }
    .checkout-actions > button { width: 100%; }
}