/* ============================================================
 * Smile · Modal (Claude Design canon)
 * Spec: design_handoff_smile_v2/COMPONENTS.md §modal
 *
 * Override Bootstrap .modal.fade so existing PS markup
 * (bankwire info, share, order-return) renders Claude Design
 * without changing templates.
 *
 * Canon markup:
 *   <div class="smile-modal" role="dialog" aria-modal="true">
 *     <div class="smile-modal__backdrop" data-modal-close></div>
 *     <div class="smile-modal__dialog">
 *       <header class="smile-modal__head">
 *         <h3>Title</h3>
 *         <button class="smile-modal__close" aria-label="Cerrar" data-modal-close>×</button>
 *       </header>
 *       <div class="smile-modal__body">...</div>
 *     </div>
 *   </div>
 * ============================================================ */

/* === Override .modal.fade Bootstrap === */
.modal,
.modal.fade,
.smile-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(43, 40, 38, 0.55) !important;
  opacity: 0;
  transition: opacity 0.22s var(--ease, ease) !important;
  overflow-y: auto !important;
}
.modal.show,
.modal.in,
.smile-modal.is-open,
.smile-modal[open] {
  display: flex !important;
  opacity: 1;
}

/* Dialog (white card) */
.modal .modal-dialog,
.smile-modal__dialog {
  background: var(--surface, #fff) !important;
  border-radius: var(--r-lg, 16px) !important;
  width: 100% !important;
  max-width: 560px !important;
  max-height: calc(100vh - 32px) !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 30px 80px -20px rgba(43, 40, 38, 0.4) !important;
  overflow: hidden !important;
  transform: none !important;
}
@media (max-width: 600px) {
  .modal .modal-dialog,
  .smile-modal__dialog { max-width: 100%; border-radius: 12px; }
}

/* Modal content wrapper (Bootstrap nests this) */
.modal .modal-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Header */
.modal .modal-header,
.smile-modal__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--line, #E8DFD6) !important;
  background: var(--surface, #fff) !important;
  margin: 0 !important;
}
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-title,
.smile-modal__head h2,
.smile-modal__head h3 {
  font-family: var(--f-display, Playfair Display, serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink, #2B2826) !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  line-height: 1.2 !important;
}

/* Close button */
.modal .close,
.modal button.close,
.smile-modal__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ink-2, #6B6360) !important;
  border: 0 !important;
  cursor: pointer !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  transition: background 0.15s, color 0.15s !important;
  flex-shrink: 0 !important;
}
.modal .close:hover,
.modal button.close:hover,
.smile-modal__close:hover {
  background: var(--surface-2, #FAF7F2) !important;
  color: var(--ink, #2B2826) !important;
  opacity: 1 !important;
}
.modal .close span,
.modal button.close span { 
  display: inline-block;
  line-height: 1;
}

/* Body */
.modal .modal-body,
.smile-modal__body {
  padding: 24px !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  font-family: var(--f-body, Inter, sans-serif) !important;
  font-size: 14px !important;
  color: var(--ink-2, #6B6360) !important;
  line-height: 1.6 !important;
  background: var(--surface, #fff) !important;
}
.modal .modal-body p,
.smile-modal__body p {
  margin: 0 0 12px !important;
}
.modal .modal-body p:last-child,
.smile-modal__body p:last-child { margin-bottom: 0 !important; }
.modal .modal-body strong,
.smile-modal__body strong { color: var(--ink, #2B2826) !important; font-weight: 600 !important; }

/* DL inside modal body (bankwire info) */
.modal .modal-body dl,
.smile-modal__body dl {
  display: grid !important;
  grid-template-columns: max-content 1fr !important;
  gap: 8px 16px !important;
  margin: 12px 0 0 !important;
  padding: 12px !important;
  background: var(--surface-2, #FAF7F2) !important;
  border-radius: 8px !important;
}
.modal .modal-body dl dt {
  font-weight: 600 !important;
  color: var(--ink, #2B2826) !important;
  margin: 0 !important;
  font-size: 13px !important;
}
.modal .modal-body dl dd {
  margin: 0 !important;
  color: var(--ink-2, #6B6360) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Footer */
.modal .modal-footer,
.smile-modal__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 16px 24px !important;
  border-top: 1px solid var(--line, #E8DFD6) !important;
  background: var(--surface, #fff) !important;
  margin: 0 !important;
}

/* Backdrop (Bootstrap) — neutralizar el backdrop separado, modal entero ya tiene bg */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.in { display: none !important; }

/* Smile backdrop interno (si se usa el markup canon) */
.smile-modal__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
}