[x-cloak] { display: none !important; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(26, 58, 38, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-width: 420px;
  width: 100%;
}
.modal-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.modal-body  { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.modal form .modal-actions { margin-top: var(--space-4); }
.modal-actions .btn { width: auto; }
.modal .alert { margin-bottom: var(--space-4); }

/* Scoped to the modal: shop.css (loaded later) resets .btn border/padding, and
   .btn-sm is also used unstyled elsewhere. */
.modal-actions .btn-ghost { background: transparent; color: var(--color-text-secondary); border: 1.5px solid var(--color-border); }
.modal-actions .btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.modal-actions .btn-danger { background: var(--color-error); color: var(--color-btn-primary-text); border: 1.5px solid var(--color-error); }
.modal-actions .btn-danger:hover { background: var(--color-error-text); border-color: var(--color-error-text); }
.modal-actions .btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }