/* Modal base styles - reset dialog defaults */
.modal {
  position: fixed;
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: calc(100vw - 2rem);
  width: 100%;
  border-radius: 0.75rem;
}

@media (min-width: 640px) {
  .modal.sm\:max-w-sm {
    max-width: 24rem;
  }

  .modal.sm\:max-w-md {
    max-width: 28rem;
  }

  .modal.sm\:max-w-lg {
    max-width: 32rem;
  }
}

@media (min-width: 1024px) {
  .modal {
    border-radius: 1rem;
  }
}

/* Transition shared by open and closing states */
.modal[open],
.modal[closing] {
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    scale 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    overlay 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete,
    display 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
}

/* Entry animation - opening */
.modal[open] {
  opacity: 1;
  scale: 1;
}

@starting-style {
  .modal[open] {
    opacity: 0;
    scale: 0.95;
  }
}

/* Exit animation - closing */
.modal[closing] {
  opacity: 0;
  scale: 0.95;
}

/* Initial state - hidden */
.modal {
  opacity: 0;
  scale: 0.95;
}

/* Backdrop transition shared by open and closing states */
.modal[open]::backdrop,
.modal[closing]::backdrop {
  transition:
    background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    overlay 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete,
    display 0.2s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
}

/* Backdrop visible state */
.modal[open]::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

@starting-style {
  .modal[open]::backdrop {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
  }
}

.modal[closing]::backdrop {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
}