:root {
  --dialog-motion-ease: cubic-bezier(.16, 1, .3, 1);
  --dialog-motion-exit: cubic-bezier(.4, 0, 1, 1);
}

/* Native dialogs share one calm motion language; drawers keep their spatial origin. */
dialog[open] {
  animation: app-dialog-enter 280ms var(--dialog-motion-ease) both !important;
}

dialog[open]::backdrop {
  animation: app-backdrop-enter 240ms ease-out both !important;
}

dialog.is-closing {
  pointer-events: none;
  animation: app-dialog-exit 170ms var(--dialog-motion-exit) both !important;
}

dialog.is-closing::backdrop {
  animation: app-backdrop-exit 170ms ease-in both !important;
}

dialog:is(.order-drawer, .shop-checkout)[open] {
  animation-name: app-drawer-enter !important;
  animation-duration: 320ms !important;
}

dialog:is(.order-drawer, .shop-checkout).is-closing {
  animation-name: app-drawer-exit !important;
  animation-duration: 190ms !important;
}

/* SweetAlert dialogs use the same arrival and exit instead of the library's jumpier default. */
.swal2-popup.supply-dialog.swal2-show {
  animation: app-alert-enter 260ms var(--dialog-motion-ease) both !important;
}

.swal2-popup.supply-dialog.swal2-hide {
  animation: app-alert-exit 160ms var(--dialog-motion-exit) both !important;
}

.swal2-container.supply-dialog-container.swal2-backdrop-show {
  animation: app-backdrop-enter 220ms ease-out both !important;
}

.swal2-container.supply-dialog-container.swal2-backdrop-hide {
  animation: app-backdrop-exit 160ms ease-in both !important;
}

.motion-confirm-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #161a21;
  box-shadow: 0 24px 72px rgba(10, 29, 53, .24);
}

.motion-confirm-dialog::backdrop {
  background: rgba(10, 24, 43, .56);
  backdrop-filter: blur(3px);
}

.motion-confirm-shell {
  display: grid;
  gap: 10px;
  padding: 24px;
}

.motion-confirm-shell h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.motion-confirm-shell p {
  margin: 0;
  color: #5f6b7a;
  font-size: 13px;
  line-height: 1.7;
}

.motion-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.motion-confirm-actions button {
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #344054;
  font-weight: 750;
}

.motion-confirm-actions .motion-confirm-submit {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}

.motion-confirm-actions button:focus-visible {
  outline: 3px solid rgba(33, 85, 217, .25);
  outline-offset: 3px;
}

@keyframes app-dialog-enter {
  from { opacity: 0; transform: translateY(14px) scale(.975); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes app-dialog-exit {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(1px); }
}

@keyframes app-drawer-enter {
  from { opacity: .72; transform: translateX(52px); filter: blur(1.5px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes app-drawer-exit {
  from { opacity: 1; transform: translateX(0); filter: blur(0); }
  to { opacity: 0; transform: translateX(36px); filter: blur(1px); }
}

@keyframes app-alert-enter {
  from { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes app-alert-exit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(7px) scale(.985); }
}

@keyframes app-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes app-backdrop-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-width: 760px) {
  .motion-confirm-shell { padding: 22px 20px; }

  .motion-confirm-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .motion-confirm-actions button { width: 100%; }
  .motion-confirm-actions .motion-confirm-submit { grid-row: 1; }

  .mobile-more-panel:not([hidden]) {
    transform-origin: 50% 100%;
    animation: app-mobile-menu-enter 240ms var(--dialog-motion-ease) both;
  }

  .mobile-more-panel.is-closing {
    pointer-events: none;
    animation: app-mobile-menu-exit 150ms var(--dialog-motion-exit) both;
  }

  @keyframes app-mobile-menu-enter {
    from { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(1px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }

  @keyframes app-mobile-menu-exit {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(12px) scale(.985); }
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog[open],
  dialog[open]::backdrop,
  dialog.is-closing,
  dialog.is-closing::backdrop,
  .swal2-popup.supply-dialog.swal2-show,
  .swal2-popup.supply-dialog.swal2-hide,
  .swal2-container.supply-dialog-container.swal2-backdrop-show,
  .swal2-container.supply-dialog-container.swal2-backdrop-hide,
  .mobile-more-panel:not([hidden]),
  .mobile-more-panel.is-closing {
    animation: none !important;
  }
}