/* Localsewa v32.8.63 — Motion Design System, Phase B
   Scope: drawers, overlays, modals, notices, toasts and booking chat sheet.
   Page/route navigation remains intentionally motion-free. */

:root {
  --ls-motion-overlay: 180ms;
  --ls-motion-modal: 220ms;
  --ls-motion-sheet: 260ms;
  --ls-motion-drawer: 260ms;
}

/* Customer navigation drawer: preserve the stateful slide, but use the shared timing. */
aside[aria-label="Customer navigation"] {
  transition-duration: var(--ls-motion-drawer) !important;
  transition-timing-function: var(--ls-ease-enter) !important;
}

/* The customer drawer backdrop is a portal sibling with this unique stacking token. */
[class~="z-[9998]"][class~="transition-opacity"][class~="md:hidden"] {
  transition-duration: var(--ls-motion-overlay) !important;
  transition-timing-function: var(--ls-ease-standard) !important;
}

/* Provider navigation uses one persistent overlay and a translating aside. */
[role="dialog"][aria-label="Provider navigation"] {
  transition-duration: var(--ls-motion-overlay) !important;
  transition-timing-function: var(--ls-ease-standard) !important;
}

[role="dialog"][aria-label="Provider navigation"] > aside {
  transition-duration: var(--ls-motion-drawer) !important;
  transition-timing-function: var(--ls-ease-enter) !important;
}

/* Admin drawer is mounted only while open, so give it a restrained entrance. */
[role="dialog"][aria-label="Admin menu"] > button {
  animation: ls-overlay-fade-in var(--ls-motion-overlay) var(--ls-ease-standard) both;
}

[role="dialog"][aria-label="Admin menu"] > aside {
  animation: ls-drawer-left-enter var(--ls-motion-drawer) var(--ls-ease-enter) both;
}

/* Notification panel behaves like a compact popover, not a dramatic modal. */
[role="dialog"][aria-label="Notifications"] > button {
  animation: ls-overlay-fade-in var(--ls-motion-overlay) var(--ls-ease-standard) both;
}

[role="dialog"][aria-label="Notifications"] > section {
  animation: ls-popover-enter var(--ls-motion-modal) var(--ls-ease-enter) both;
  transform-origin: top center;
}

/* Common mobile bottom-sheet dialogs: cancellation, OTP, request actions, confirmation, etc. */
[role="dialog"][aria-modal="true"].fixed.inset-0.flex.items-end {
  animation: ls-overlay-fade-in var(--ls-motion-overlay) var(--ls-ease-standard) both;
}

[role="dialog"][aria-modal="true"].fixed.inset-0.flex.items-end > :last-child:not(button) {
  animation: ls-sheet-enter var(--ls-motion-sheet) var(--ls-ease-enter) both;
}

/* Booking chat has its own panel and receives the same bottom-sheet language. */
.ls-booking-chat-overlay {
  animation: ls-overlay-fade-in var(--ls-motion-overlay) var(--ls-ease-standard) both !important;
}

.ls-booking-chat-panel {
  animation: ls-sheet-enter var(--ls-motion-sheet) var(--ls-ease-enter) both !important;
}

/* Existing center notices were previously springy/bouncy. Keep only a tiny natural settle. */
.ui-center-notice,
.ui-role-switch-card {
  animation: ls-modal-enter var(--ls-motion-modal) var(--ls-ease-enter) both !important;
}

/* Role-switch internals should not bounce independently. */
.ui-role-node,
.ui-role-node-delay,
.ui-role-connector > span {
  animation: ls-soft-fade-in var(--ls-motion-base) var(--ls-ease-standard) both !important;
  transform: none !important;
}

/* Remove the continuous premium glow: persistent decorative motion is intentionally avoided. */
.ui-premium-glow {
  animation: none !important;
  transform: none !important;
}

/* Toasts use a short vertical settle without zoom. */
.ui-toast-enter {
  animation: ls-toast-enter-premium var(--ls-motion-modal) var(--ls-ease-enter) both !important;
}

@media (min-width: 640px) {
  /* On larger screens, sheets read as centered dialogs rather than mobile drawers. */
  [role="dialog"][aria-modal="true"].fixed.inset-0.flex.items-end > :last-child:not(button),
  .ls-booking-chat-panel {
    animation-name: ls-modal-enter !important;
    animation-duration: var(--ls-motion-modal) !important;
  }
}

@keyframes ls-overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ls-drawer-left-enter {
  from {
    opacity: .92;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ls-popover-enter {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ls-sheet-enter {
  from {
    opacity: .98;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ls-modal-enter {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ls-soft-fade-in {
  from { opacity: .72; }
  to { opacity: 1; }
}

@keyframes ls-toast-enter-premium {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  aside[aria-label="Customer navigation"],
  [class~="z-[9998]"][class~="transition-opacity"][class~="md:hidden"],
  [role="dialog"][aria-label="Provider navigation"],
  [role="dialog"][aria-label="Provider navigation"] > aside {
    transition-duration: 0ms !important;
  }

  [role="dialog"][aria-label="Admin menu"] > button,
  [role="dialog"][aria-label="Admin menu"] > aside,
  [role="dialog"][aria-label="Notifications"] > button,
  [role="dialog"][aria-label="Notifications"] > section,
  [role="dialog"][aria-modal="true"].fixed.inset-0.flex.items-end,
  [role="dialog"][aria-modal="true"].fixed.inset-0.flex.items-end > :last-child:not(button),
  .ls-booking-chat-overlay,
  .ls-booking-chat-panel,
  .ui-center-notice,
  .ui-role-switch-card,
  .ui-role-node,
  .ui-role-node-delay,
  .ui-role-connector > span,
  .ui-premium-glow,
  .ui-toast-enter {
    animation: none !important;
    transform: none !important;
  }
}