/* Custom SweetAlert2 styles to match Jewelry Shop Cavite palette */
/* Use the same variables as the main site: light surface with gold accent */

/* Popup container: light surface color, dark text */
body .swal2-container .swal2-popup, .swal2-popup.swal2-modal {
  background: var(--color-surface, #ffffff) !important;
  color: var(--color-text, #1a1a1a) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(18,18,18,0.08) !important;
  font-family: var(--font-body, 'Outfit', system-ui, -apple-system) !important;
  border: 1px solid var(--color-border, #e5e2dd) !important;
}

.swal2-title {
  color: var(--color-text, #1a1a1a) !important;
  font-weight: 600 !important;
}

.swal2-html-container, .swal2-content {
  color: var(--color-text, #1a1a1a) !important;
  font-size: 14px !important;
}

/* Backdrop: subtle dark overlay to focus modal */
.swal2-backdrop-show {
  background: rgba(0,0,0,0.32) !important;
}

/* Icon and close button color use accent or muted text depending on intent */
.swal2-icon {
  color: var(--color-accent, #b8860b) !important;
}
.swal2-close {
  color: var(--color-muted, #6b6b6b) !important;
}

/* Confirm button uses site accent (gold), cancel is subtle outline */
.swal2-styled.swal2-confirm, .swal2-confirm.swal2-styled {
  background-color: var(--color-accent, #b8860b) !important;
  color: #fff !important;
  border: 1px solid var(--color-accent-dark, #8b6914) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.swal2-styled.swal2-confirm:hover, .swal2-confirm.swal2-styled:hover {
  background-color: var(--color-accent-dark, #8b6914) !important;
}
.swal2-styled.swal2-cancel, .swal2-cancel.swal2-styled {
  background: transparent !important;
  color: var(--color-text, #1a1a1a) !important;
  border: 1px solid var(--color-border, rgba(0,0,0,0.06)) !important;
  padding: 7px 14px !important;
}

/* Actions spacing */
.swal2-actions {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
}

/* Inputs inside modals match form styles */
.swal2-popup input, .swal2-popup textarea, .swal2-popup select {
  background: var(--color-surface, #fff) !important;
  color: var(--color-text, #1a1a1a) !important;
  border: 1px solid var(--color-border, #e5e2dd) !important;
  padding: .45rem .6rem !important;
  border-radius: 6px !important;
}

@media (max-width: 480px) {
  .swal2-popup { padding: 18px !important; border-radius: 8px !important; }
  .swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel { padding-left: 12px !important; padding-right: 12px !important; }
}