/* WizardUx Modal Container
 * Native HTML5 <dialog> element styling
 * Desktop-first - DO NOT modify these base styles for mobile
 */

/* ==========================================================================
   MODAL CONTAINER
   ========================================================================== */

.wizard-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: var(--wizard-modal-width);
  height: var(--wizard-modal-height);
  max-height: var(--wizard-modal-max-height);
  margin: auto;
  padding: 0;
  border: 1px solid var(--wizard-color-border-darker);
  border-radius: var(--wizard-modal-border-radius);
  background: var(--wizard-color-bg);
  box-shadow: var(--wizard-shadow-modal);
  overflow: hidden;
}

.wizard-modal::backdrop {
  background: oklch(var(--wizard-lch-black) / 0.5);
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   MODAL INNER CONTAINER
   Flexbox column layout for header/content/footer
   ========================================================================== */

.wizard-modal__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ==========================================================================
   BODY SCROLL LOCK
   Prevents background scrolling when modal is open
   ========================================================================== */

body.wizard-modal-open {
  overflow: hidden;
}