/**
 * Dresium Try-On — CSS Confirm/Alert modal (M36, 2026-09-03)
 *
 * Port di dresium-modal.css:469-573 del plugin WordPress, adattato:
 *   - Selettori scoped su .dresium-tryon-confirm-modal (BEM)
 *   - Token brand --dresium-tryon-* con fallback numerico
 *     (dialog top-layer non eredita da .dresium-tryon-block)
 *   - !important dove il tema del merchant potrebbe vincere il cascade
 *
 * Caricato dal blocks/tryon.liquid via stylesheet_tag.
 */

/* ============================================================
   Base dialog reset (top-layer isolation dal tema merchant)
   ============================================================ */
.dresium-tryon-confirm-modal {
  padding: 0 !important;
  border: none !important;
  border-radius: var(--dresium-tryon-radius, 10px) !important;
  max-width: 400px !important;
  width: 90% !important;
  background: var(--dresium-tryon-white, #ffffff) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
  /* M55E: font paragrafi merchant-driven (fallback Poppins per legacy). */
  font-family: var(--dresium-tryon-font-paragraphs, var(--dresium-tryon-font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)) !important;
}

.dresium-tryon-confirm-modal::backdrop {
  background: var(--dresium-tryon-backdrop, rgba(0, 0, 0, 0.5));
}

/* ============================================================
   Header
   ============================================================ */
.dresium-tryon-confirm-modal__header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 20px 24px 16px 24px !important;
  border-bottom: none !important;
  background: transparent !important;
}

.dresium-tryon-confirm-modal__header-content {
  flex: 1;
}

.dresium-tryon-confirm-modal__title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--dresium-tryon-gray-900, #212529) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.dresium-tryon-confirm-modal__close {
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--dresium-tryon-gray-600, #515962) !important;
  transition: opacity 0.15s ease !important;
  width: auto !important;
  height: auto !important;
  border-radius: 4px !important;
}

.dresium-tryon-confirm-modal__close:hover {
  opacity: 0.7;
}

/* ============================================================
   Body
   ============================================================ */
.dresium-tryon-confirm-modal__body {
  padding: 0 24px 20px 24px !important;
}

.dresium-tryon-confirm-modal__message {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--dresium-tryon-gray-700, #495057) !important;
  margin: 0 !important;
  white-space: pre-line;
}

/* ============================================================
   Footer + bottoni
   ============================================================ */
.dresium-tryon-confirm-modal__footer {
  display: flex !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  background: var(--dresium-tryon-gray-50, #f8f9fa) !important;
  border-top: 1px solid var(--dresium-tryon-gray-200, #e9ecef) !important;
}

.dresium-tryon-confirm-modal__btn-cancel,
.dresium-tryon-confirm-modal__btn-confirm {
  flex: 1 !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: var(--dresium-tryon-radius, 8px) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}

.dresium-tryon-confirm-modal__btn-cancel {
  background: var(--dresium-tryon-white, #ffffff) !important;
  color: var(--dresium-tryon-gray-700, #495057) !important;
  border: 1px solid var(--dresium-tryon-gray-300, #dee2e6) !important;
}

.dresium-tryon-confirm-modal__btn-cancel:hover {
  background: var(--dresium-tryon-gray-50, #f8f9fa) !important;
  border-color: var(--dresium-tryon-gray-400, #adb5bd) !important;
}

.dresium-tryon-confirm-modal__btn-confirm {
  background: var(--dresium-tryon-gradient-diag, linear-gradient(135deg, #4362db 0%, #7C3AED 100%)) !important;
  color: var(--dresium-tryon-white, #ffffff) !important;
  border: none !important;
}

.dresium-tryon-confirm-modal__btn-confirm:hover {
  background: var(--dresium-tryon-gradient-diag-hover, linear-gradient(135deg, #3451c9 0%, #6B2ADC 100%)) !important;
  box-shadow: 0 4px 12px var(--dresium-tryon-primary-alpha-30, rgba(67, 98, 219, 0.3));
}

/* ============================================================
   Variant --alert (single OK button, no close, no cancel)
   Usato da .alert() al posto di window.alert().
   ============================================================ */
.dresium-tryon-confirm-modal--alert .dresium-tryon-confirm-modal__btn-cancel {
  display: none !important;
}

.dresium-tryon-confirm-modal--alert .dresium-tryon-confirm-modal__close {
  display: none !important;
}

.dresium-tryon-confirm-modal--alert .dresium-tryon-confirm-modal__btn-confirm {
  flex: none !important;
  width: 100% !important;
}

/* ============================================================
   Variant --danger (bottone confirm rosso per azioni distruttive)
   ============================================================ */
.dresium-tryon-confirm-modal--danger .dresium-tryon-confirm-modal__btn-confirm {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
}

.dresium-tryon-confirm-modal--danger .dresium-tryon-confirm-modal__btn-confirm:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* ============================================================
   Mobile responsive (<480px)
   ============================================================ */
@media (max-width: 480px) {
  .dresium-tryon-confirm-modal {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }

  .dresium-tryon-confirm-modal__footer {
    flex-direction: column-reverse !important;
  }

  .dresium-tryon-confirm-modal__btn-cancel,
  .dresium-tryon-confirm-modal__btn-confirm {
    width: 100% !important;
  }
}