/* ==========================================================================
   Menu / Activity page (v3) — porting del mockup orders (3).html.
   Sfondo piatto, header Activity, liquid search, sort morph, tabs,
   lista ordini. Tutto prefissato mp- per non collidere.
   ========================================================================== */

.dash:has(.mp-root),
.dmain:has(.mp-root) { background: var(--jsm-bg, #ffffff) !important; }
/* Gender override vive ora in jsm-sito.css (body[data-gender="male"]). */
/* Riduce il padding orizzontale/basso del wrapper dcontent;
   mantiene il top-padding per non finire sotto la ddm-bar. */
.dcontent:has(.mp-root) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.mp-root {
  /* Tappa 2 refactor: le --mp-* diventano alias dei token jsm-sito.css.
     Un solo posto per cambiare, zero duplicati. Fallback = valore pre-jsm
     così il file sopravvive anche se jsm-sito.css manca all'appello. */
  /* --- motion tokens ---------------------------------------------------- */
  --mp-dur-stagger:    var(--jsm-dur-stagger,     40ms);
  --mp-dur-micro:      var(--jsm-dur-micro,       80ms);
  --mp-dur-quick:      var(--jsm-dur-quick,      150ms);
  --mp-dur-fast:       var(--jsm-dur-fast,       250ms);
  --mp-dur-medium:     var(--jsm-dur-medium,     350ms);
  --mp-dur-slow:       var(--jsm-dur-slow,       400ms);
  --mp-dur-very-slow:  var(--jsm-dur-very-slow,  500ms);
  --mp-ease-smooth-out:    var(--jsm-ease-smooth-out,    cubic-bezier(0.22, 1, 0.36, 1));
  --mp-ease-in-out:        var(--jsm-ease-in-out,        ease-in-out);
  --mp-ease-out:           var(--jsm-ease-out,           ease-out);
  --mp-ease-bounce:        var(--jsm-ease-bounce,        cubic-bezier(0.34, 1.36, 0.64, 1));
  --mp-ease-bounce-strong: var(--jsm-ease-bounce-strong, cubic-bezier(0.34, 3.85, 0.64, 1));
  --mp-distance-micro:  var(--jsm-dist-micro,   4px);
  --mp-distance-base:   var(--jsm-dist-base,    8px);
  --mp-distance-med:    var(--jsm-dist-medium, 12px);
  --mp-scale-medium:    var(--jsm-scale-medium, 0.97);
  --mp-scale-tiny:      var(--jsm-scale-tiny,   0.99);
  --mp-blur-small:      var(--jsm-blur-small,   2px);

  /* --- spacing (4px base) ---------------------------------------------- */
  --mp-space-1:  var(--jsm-space-1,   4px);
  --mp-space-2:  var(--jsm-space-2,   8px);
  --mp-space-3:  var(--jsm-space-3,  12px);
  --mp-space-4:  var(--jsm-space-4,  16px);
  --mp-space-5:  var(--jsm-space-5,  20px);
  --mp-space-6:  var(--jsm-space-6,  24px);
  --mp-space-8:  var(--jsm-space-8,  32px);
  --mp-space-10: var(--jsm-space-10, 40px);
  --mp-space-16: var(--jsm-space-16, 64px);

  /* --- palette --------------------------------------------------------- */
  --mp-accent:   var(--jsm-accent,     #FF69B4);
  --mp-ink-900:  var(--jsm-ink,        #0a0a0a);
  --mp-ink-700:  #14141d;                         /* non usato da jsm, resta locale */
  --mp-ink-600:  #475569;
  --mp-ink-500:  var(--jsm-ink-muted,  #52607a);
  --mp-ink-400:  var(--jsm-ink-faint,  #8b919d);

  /* sort morph (invariati, già specifici) */
  --sort-dur-anticipate: 60ms;
  --sort-dur-open-height: 380ms;
  --sort-dur-open-width: 440ms;
  --sort-dur-icon-rotate: 320ms;
  --sort-dur-reveal: 300ms;
  --sort-dur-close-mult: 0.92;
  --sort-ease-lead: cubic-bezier(0.32, 0.72, 0, 1);
  --sort-ease-follow: cubic-bezier(0.4, 0.0, 0.15, 1);
  --sort-ease-glyph: cubic-bezier(0.2, 0.9, 0.3, 1);
  --sort-ease-anticip: cubic-bezier(0.5, 0, 0.75, 0);
  --seed-size: 44px;
  --panel-w: 212px;
  --panel-h: 224px;
  --panel-h-overshoot: 230px;
  --push-distance: 192px;
  --push-overshoot: 198px;

  background: var(--jsm-bg, #ffffff);
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  padding: 0 0 var(--mp-space-10);
  color: var(--mp-ink-900);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}

/* Header ------------------------------------------------------------------- */
.mp-head {
  padding: var(--mp-space-6) var(--mp-space-4) var(--mp-space-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mp-space-4);
}
.mp-title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--mp-ink-900);
  font-family: var(--font-sans);
}

/* Liquid search bar -------------------------------------------------------- */
.mp-search-row { display: flex; justify-content: center; padding: var(--mp-space-3) var(--mp-space-4); }
.mp-search-slot { width: 100%; max-width: 24rem; }
.mp-liquidBar { position: relative; width: 100%; height: 64px; }
.mp-liquidShapes { position: absolute; inset: 0; filter: url(#mp-liquid-goo); }
.mp-liquidIcon { position: absolute; top: 0; left: 0; width: 64px; height: 64px; border-radius: 50%; background: #ffffff; }
.mp-liquidPill { position: absolute; top: 0; left: 14px; right: 0; height: 64px; border-radius: 32px; background: #ffffff; }
.mp-liquidContent { position: absolute; inset: 0; pointer-events: none; }
.mp-liquidContent > * { pointer-events: auto; }
.mp-liquidIconOutline, .mp-liquidPillOutline {
  position: absolute; top: 0; height: 64px;
  border: 2px solid var(--mp-accent);
  box-sizing: border-box;
  opacity: 0; pointer-events: none !important;
  transition: opacity var(--mp-dur-fast) var(--mp-ease-out);
}
.mp-liquidIconOutline { left: 0; width: 64px; border-radius: 50%; }
.mp-liquidPillOutline { left: 14px; right: 0; border-radius: 32px; }
.mp-liquidBar.has-text .mp-liquidPillOutline,
.mp-liquidBar:focus-within .mp-liquidPillOutline { opacity: 1; }
.mp-liquidIconBox {
  position: absolute; top: 0; left: 0;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mp-ink-900);
}
.mp-liquidForm {
  position: absolute; top: 0; left: 14px; right: 0; height: 64px;
  display: flex; align-items: center;
  padding: 0 var(--mp-space-5) 0 44px;
  box-sizing: border-box;
}
.mp-liquidInput {
  flex: 1; min-width: 0;
  border: none;
  background: transparent;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  font-size: 20px;
  color: var(--mp-ink-900);
  height: 100%;
  padding: 0;
  width: 100%;
  -webkit-appearance: none; appearance: none;
  font-family: inherit;
}
.mp-liquidInput:focus, .mp-liquidInput:focus-visible {
  outline: none !important; box-shadow: none !important; border: none !important;
}
.mp-liquidInput::placeholder { color: #8b919d; } /* 4.5:1 contrast on white */
.mp-liquidInput::-webkit-search-cancel-button { display: none; }

/* Tabs --------------------------------------------------------------------- */
.mp-tabs {
  padding: var(--mp-space-2) var(--mp-space-4) var(--mp-space-4);
  display: flex; align-items: center;
  gap: var(--mp-space-6);
  overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.mp-tabs::-webkit-scrollbar { display: none; }
.mp-tab-btn {
  font-size: 20px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  color: var(--mp-ink-400);
  font-weight: 500;
  letter-spacing: -0.015em;
  background: none;
  border: 0;
  /* padding grows the hit area to 44px without shifting the baseline */
  padding: var(--mp-space-3) 0;
  margin-block: calc(var(--mp-space-3) * -1);
  touch-action: manipulation;
  transition:
    color var(--mp-dur-quick) var(--mp-ease-out),
    opacity var(--mp-dur-quick) var(--mp-ease-out);
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.mp-tab-btn:active { opacity: 0.6; }
.mp-tab-btn.is-active { color: var(--mp-ink-900); font-weight: 700; }
/* Pre-reserve bold width (prevents jitter when swapping 500 → 700). */
.mp-tab-btn::before {
  content: attr(data-label);
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-weight: 700;
  pointer-events: none;
}
.mp-tab-btn:focus-visible {
  outline: 2px solid var(--mp-accent); outline-offset: var(--mp-space-1); border-radius: 4px;
}

/* Orders ------------------------------------------------------------------- */
.mp-list {
  flex: 1;
  padding: var(--mp-space-2) var(--mp-space-4) 0;
  display: flex; flex-direction: column;
  gap: var(--mp-space-6);
}
.mp-card {
  display: flex; align-items: flex-start;
  gap: var(--mp-space-4);
  animation: mpCardEnter var(--mp-dur-fast) var(--mp-ease-smooth-out) both;
}
@keyframes mpCardEnter {
  from { opacity: 0; transform: translateY(var(--mp-distance-med)); filter: blur(var(--mp-blur-small)); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .mp-card { animation: none; } }
@keyframes mpGiftPop {
  0%   { opacity: 0; transform: scale(0.4) translateY(6px); }
  55%  { opacity: 1; transform: scale(1.08) translateY(0); }
  80%  { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mp-gift-pop {
  opacity: 0;
  animation: mpGiftPop var(--mp-dur-very-slow) var(--mp-ease-bounce) both;
}
@media (prefers-reduced-motion: reduce) { .mp-gift-pop { animation: none; opacity: 1; } }
.mp-preview {
  position: relative;
  width: 112px; height: 112px;
  border-radius: var(--mp-space-4);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(233, 236, 239, 0.7);
}
.mp-preview.bg-pink { background: #fce5e6; }
.mp-preview.bg-blue { background: #f0f4ff; }
.mp-preview.bg-orange { background: #fef3e2; }
.mp-preview.bg-green { background: #e6f7e6; }
.mp-preview.bg-purple { background: #f3e8ff; }
.mp-preview-emoji {
  font-size: 32px; padding-bottom: var(--mp-space-2);
  line-height: 1;
  user-select: none;
}
.mp-preview-photo {
  color: #868e96;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: var(--mp-space-2);
}
.mp-preview-photo svg { width: 32px; height: 32px; }
.mp-price-wrap {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
}
.mp-price {
  background: rgba(10,10,10,0.78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.08);
  color: #ffffff;
  font-weight: 700;
  padding: var(--mp-space-1) var(--mp-space-3);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-num, var(--font-sans, inherit));
}
.mp-details {
  flex: 1;
  min-height: 112px;
  display: flex; flex-direction: column;
  gap: var(--mp-space-2);
  padding-block: var(--mp-space-1);
  min-width: 0;
}
.mp-details-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--mp-space-3);
}
.mp-user {
  font-size: 14px; color: var(--mp-ink-600); font-weight: 500;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-time {
  font-size: 13px; color: var(--mp-ink-500); font-weight: 500;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.mp-body { margin-top: 0; }
.mp-body-title {
  margin: 0;
  font-size: 20px; font-weight: 700; color: var(--mp-ink-900);
  letter-spacing: -0.015em; line-height: 1.2;
}
.mp-body-msg {
  font-size: 14px; font-weight: 500; color: var(--mp-ink-700);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.mp-body-emojis { display: flex; align-items: center; gap: var(--mp-space-1); }
.mp-body-emojis > span { font-size: 24px; line-height: 1; user-select: none; }

/* Empty state -------------------------------------------------------------- */
/* Quando la pagina è vuota, i controlli (search + sort + tabs) spariscono:
   l'empty state è la pagina. */
.mp-root.is-empty .mp-search-row,
.mp-root.is-empty .mp-tabs { display: none; }

/* Visually hidden utility: nome accessibile per lo screen reader
   senza occupare spazio nel layout. */
.mp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mp-root.is-empty .mp-head { padding-bottom: var(--mp-space-2); }

.mp-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--mp-space-4);
  padding: var(--mp-space-10) var(--mp-space-6) var(--mp-space-16);
  text-align: center;
  animation: mpCardEnter var(--mp-dur-slow) var(--mp-ease-smooth-out) both;
}
.mp-empty-tile {
  width: 128px; height: 128px;
  border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.04);
  margin-bottom: var(--mp-space-2);
  animation: mpGiftPop var(--mp-dur-very-slow) var(--mp-ease-bounce) both;
}
.mp-empty-tile.bg-pink   { background: #fce5e6; }
.mp-empty-tile.bg-blue   { background: #f0f4ff; }
.mp-empty-tile.bg-orange { background: #fef3e2; }
.mp-empty-tile.bg-green  { background: #e6f7e6; }
.mp-empty-tile.bg-purple { background: #f3e8ff; }
.mp-empty-tile--muted {
  background: #f3f4f6;
  box-shadow: none;
  width: 96px; height: 96px;
  border-radius: 22px;
}
.mp-empty-tile--muted svg { width: 32px; height: 32px; color: #94a3b8; }
.mp-empty-emoji {
  font-size: 56px; line-height: 1;
  padding-bottom: var(--mp-space-1);
  user-select: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.08));
}
.mp-empty-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--mp-ink-900);
  max-width: 24ch;
  font-family: var(--font-sans);
}
.mp-empty-hint {
  margin: 0;
  font-size: 14px; line-height: 1.5;
  font-weight: 500;
  color: var(--mp-ink-500);
  max-width: 32ch;
}
.mp-empty-cta {
  margin-top: var(--mp-space-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mp-space-2);
  min-height: 44px;
  padding: var(--mp-space-3) var(--mp-space-6);
  border-radius: 999px;
  background: var(--mp-ink-900);
  color: #fff;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.4);
  transition:
    transform var(--mp-dur-quick) var(--mp-ease-smooth-out),
    box-shadow var(--mp-dur-quick) var(--mp-ease-out),
    background var(--mp-dur-quick) var(--mp-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.mp-empty-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.45); }
.mp-empty-cta:active { transform: scale(0.96); background: #1f1f28; }
.mp-empty-cta:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .mp-empty, .mp-empty-tile, .mp-card, .mp-gift-pop, .mp-empty-cta { animation: none; transition: none; }
}