/* patch: modal centrado + estilo */
.modal { position: fixed; inset: 0; display: none; z-index: 9999; align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal .modal-content {
  position: relative; z-index: 1; width: min(560px, 92vw);
  background: var(--dark); color: var(--white); border-radius: 16px; padding: 22px;
  border: 1px solid var(--primary); box-shadow: 0 20px 60px rgba(0,0,0,.45);
  animation: modal-pop .22s ease-out;
}
@keyframes modal-pop { from { transform: scale(.98); opacity:.0 } to { transform: scale(1); opacity:1 } }
#checkout-modal .field { margin-bottom: 12px; text-align: left; }
#checkout-modal label { display:block; font-size:.95rem; margin-bottom:6px; color: var(--light); }
#checkout-modal input, #checkout-modal textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid #2a2a2a;
  background: #1a1a1a; color: var(--white); outline: none;
}
#checkout-modal input:focus, #checkout-modal textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(233,30,99,.15); }
#checkout-modal textarea { min-height: 90px; resize: vertical; }
#checkout-modal .actions { display:flex; gap:10px; justify-content:flex-end; margin-top: 10px; }
#btn-cancel-modal { background: #2a2a2a; color: var(--white); padding: 10px 14px; border: 0; border-radius: 10px; cursor:pointer; }
#btn-cancel-modal:hover { filter: brightness(1.08); }
#btn-confirm-checkout { background: var(--primary); color: #fff; padding: 10px 16px; border: 0; border-radius: 10px; cursor:pointer; font-weight: 600; }
#btn-confirm-checkout:hover { filter: brightness(1.05); box-shadow: 0 0 10px rgba(233,30,99,.35); }