/* SalesPro Design System 2.0 — Motion & microinteractions
   Version 3.2.6.46
   Progressive enhancement only: no layout or business-logic changes. */

:root {
  --sp-motion-fast: 140ms;
  --sp-motion-base: 220ms;
  --sp-motion-slow: 360ms;
  --sp-ease-standard: cubic-bezier(.2,.8,.2,1);
  --sp-ease-emphasized: cubic-bezier(.16,1,.3,1);
  --sp-press-scale: .975;
  --sp-lift-y: -2px;
}

html.spds-motion-ready { scroll-behavior: smooth; }

/* Interactive controls */
.spds-admin :where(.btn,.sp-btn,button:not(.no-spds-motion),[role="button"]),
.spds-store :where(.ph-btn,.btn,.sp-btn,button:not(.no-spds-motion),[role="button"]) {
  transition:
    transform var(--sp-motion-fast) var(--sp-ease-standard),
    box-shadow var(--sp-motion-base) var(--sp-ease-standard),
    background-color var(--sp-motion-base) var(--sp-ease-standard),
    border-color var(--sp-motion-base) var(--sp-ease-standard),
    color var(--sp-motion-base) var(--sp-ease-standard),
    opacity var(--sp-motion-fast) linear;
  -webkit-tap-highlight-color: transparent;
}

.spds-admin :where(.btn,.sp-btn,button,[role="button"]):not(:disabled):not([aria-disabled="true"]):active,
.spds-store :where(.ph-btn,.btn,.sp-btn,button,[role="button"]):not(:disabled):not([aria-disabled="true"]):active,
.spds-motion-pressed {
  transform: scale(var(--sp-press-scale)) !important;
}

/* Lift only for genuine cards; never move table wrappers or form shells */
.spds-admin :where(.sp-card,.metric-card,.dashboard-card,.quick-action-card),
.spds-store :where(.product-card,.ph-product-card,.ph-collection-card,.ph-promo-card) {
  transition:
    transform var(--sp-motion-base) var(--sp-ease-emphasized),
    box-shadow var(--sp-motion-base) var(--sp-ease-standard),
    border-color var(--sp-motion-base) var(--sp-ease-standard);
}

@media (hover:hover) and (pointer:fine) {
  .spds-admin :where(.sp-card,.metric-card,.dashboard-card,.quick-action-card):hover,
  .spds-store :where(.product-card,.ph-product-card,.ph-collection-card,.ph-promo-card):hover {
    transform: translateY(var(--sp-lift-y));
  }
}

/* Inputs: subtle focus transition without changing dimensions */
.spds-admin :where(input,select,textarea),
.spds-store :where(input,select,textarea) {
  transition:
    border-color var(--sp-motion-fast) var(--sp-ease-standard),
    box-shadow var(--sp-motion-fast) var(--sp-ease-standard),
    background-color var(--sp-motion-base) var(--sp-ease-standard);
}

/* Progressive reveal. Elements stay visible when JS is unavailable. */
.spds-motion-ready .spds-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--sp-motion-slow) var(--sp-ease-emphasized),
    transform var(--sp-motion-slow) var(--sp-ease-emphasized);
  transition-delay: var(--sp-reveal-delay, 0ms);
}
.spds-motion-ready .spds-reveal.spds-in-view {
  opacity: 1;
  transform: none;
}

/* Modal and drawer transitions — compatible with hidden/display implementations */
.spds-admin :where(.modal,.sp-modal,.modal-overlay),
.spds-store :where(.modal,.sp-modal,.ph-cart-drawer-overlay,.ph-mobile-overlay) {
  transition: opacity var(--sp-motion-base) var(--sp-ease-standard), visibility var(--sp-motion-base) linear;
}
.spds-admin :where(.modal-content,.sp-modal__dialog,.modal-dialog),
.spds-store :where(.modal-content,.sp-modal__dialog,.ph-cart-drawer) {
  transition: transform var(--sp-motion-slow) var(--sp-ease-emphasized), opacity var(--sp-motion-base) linear;
}
.spds-store .ph-cart-drawer { will-change: transform; }

/* Busy state utility */
.sp-is-busy,
[aria-busy="true"] {
  cursor: wait !important;
}
.sp-is-busy::after,
button[aria-busy="true"]::after,
a[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-start: .55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.15em;
  animation: spds-spin .7s linear infinite;
}
@keyframes spds-spin { to { transform: rotate(360deg); } }

/* Skeleton utilities for future AJAX blocks */
.sp-skeleton {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  background: color-mix(in srgb, var(--surface-2, #e9eaf1) 88%, transparent);
  border-color: transparent !important;
  border-radius: var(--radius-sm, 8px);
}
.sp-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation: spds-shimmer 1.35s infinite;
}
@keyframes spds-shimmer { 100% { transform: translateX(100%); } }

/* Toast entrance utility */
.sp-toast-enter { animation: spds-toast-in var(--sp-motion-slow) var(--sp-ease-emphasized) both; }
@keyframes spds-toast-in {
  from { opacity:0; transform:translate3d(0,-8px,0) scale(.985); }
  to { opacity:1; transform:none; }
}

/* Current-page navigation feedback */
.spds-admin :where(.sidebar a,.nav-link)[aria-current="page"],
.spds-store .sp-store-links > a[aria-current="page"] {
  position: relative;
}
.spds-admin :where(.sidebar a,.nav-link)[aria-current="page"]::after,
.spds-store .sp-store-links > a[aria-current="page"]::after {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:25%;
  bottom:25%;
  width:3px;
  border-radius:999px;
  background:currentColor;
  animation:spds-indicator-in var(--sp-motion-base) var(--sp-ease-emphasized) both;
}
@keyframes spds-indicator-in { from { transform:scaleY(0); opacity:0; } }

/* Respect accessibility settings completely */
@media (prefers-reduced-motion: reduce) {
  html.spds-motion-ready { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .spds-motion-ready .spds-reveal { opacity:1; transform:none; }
}


/* SPDS 2.1 — compatibility fixes for storefront controls */
/* Product cards already provide their own loading spinner and labels. */
.spds-store button.ph-add-button-v3241[aria-busy="true"]::after,
.spds-store button.ph-add-button-v3241.sp-is-busy::after,
.spds-store [data-add-button][aria-busy="true"]::after,
.spds-store [data-add-button].sp-is-busy::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Taxonomy pills and category drawer rows must never receive the global
   current-page side indicator. Their active state is rendered by the theme. */
.spds-store .ph-category-row-v3245[aria-current="page"]::after,
.spds-store .ph-taxonomy-pills a[aria-current="page"]::after,
.spds-store .ph-catalog-brand-pills-v32621 a[aria-current="true"]::after {
  content: none !important;
  display: none !important;
}


/* SPDS 2.1.2 — mobile bottom navigation must never inherit the side indicator. */
.spds-store .ph-mobile-bottom-nav > a::before,
.spds-store .ph-mobile-bottom-nav > a::after,
.spds-store .ph-mobile-bottom-nav > button::before,
.spds-store .ph-mobile-bottom-nav > button::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}