/* ===========================================================================
   MP Menu — drawer mobile multi-livello categorie. Vanilla, no jQuery.
   Visibile solo su mobile/tablet (<992px). Palette tema: blu #084c95.
   =========================================================================== */

.mpm-drawer,
.mpm-overlay { display: none; }

/* blocco scroll del body quando il drawer è aperto */
body.mpm-lock { overflow: hidden; }

/* disattiva le transizioni durante il ripristino della posizione salvata */
.mpm-no-anim .mpm-panel { transition: none !important; }

@media (max-width: 991.98px) {

  .mpm-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(9, 24, 43, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1090;
  }
  .mpm-overlay.is-open { opacity: 1; visibility: visible; }

  .mpm-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(88vw, 380px);
    background: #fff;
    box-shadow: 4px 0 30px rgba(9, 24, 43, .22);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.33, 1, .68, 1);
    z-index: 1091;
    will-change: transform;
  }
  .mpm-drawer.is-open { transform: translateX(0); }

  /* ------------------------------- HEAD ---------------------------------- */
  .mpm-drawer__head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: linear-gradient(180deg, #0a5aae 0%, #084c95 100%);
    color: #fff;
    flex: 0 0 auto;
    box-shadow: 0 2px 10px rgba(8, 76, 149, .28);
    z-index: 3;
  }
  /* gruppo centrale: nome + icona "livello principale" accanto */
  .mpm-drawer__titlewrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .mpm-drawer__title {
    min-width: 0;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mpm-back,
  .mpm-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
    transition: background .15s ease;
  }
  /* pulsante "livello principale" (casetta) accanto al nome */
  .mpm-home {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .14);
    border: 0;
    color: #fff;
    cursor: pointer;
    border-radius: 9px;
    transition: background .15s ease;
  }
  .mpm-back:active,
  .mpm-close:active,
  .mpm-home:active { background: rgba(255, 255, 255, .3); }
  .mpm-home:hover { background: rgba(255, 255, 255, .24); }
  /* back sempre presente come slot (simmetria col close): solo invisibile al root */
  .mpm-back.is-hidden { visibility: hidden; }
  .mpm-home[hidden] { display: none; }

  /* ------------------------------- BODY ---------------------------------- */
  .mpm-drawer__body {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: #eef1f6;
  }

  .mpm-panel {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 6px 0 24px;
    list-style: none;
    /* SOLO verticale: overflow-x hidden evita che i sottomenu parcheggiati
       a translateX(100%) creino scroll orizzontale. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* scrollabile ma senza barra visibile */
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: #eef1f6;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.33, 1, .68, 1), visibility .3s;
    pointer-events: none;
  }
  .mpm-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .mpm-panel.is-active {
    transform: translateX(0);
    visibility: visible;
    z-index: 2;
    pointer-events: auto; /* RIABILITA i click: annulla il none ereditato dal genitore is-under */
  }
  /* Pannello antenato "parcheggiato": DEVE restare a translateX(0) — i pannelli sono
     annidati, ogni traslazione qui si sommerebbe al pannello attivo discendente.
     Coperto (opaco) dal pannello attivo sopra via z-index. */
  .mpm-panel.is-under {
    transform: translateX(0);
    visibility: visible;
    z-index: 1;
    pointer-events: none;
  }

  /* --------------------- VOCI (card in lista raggruppata) ---------------- */
  .mpm-li { margin: 0 12px; }

  .mpm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 15px;
    margin-top: 9px;
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(16, 42, 80, .05);
    text-align: left;
    font-size: .97rem;
    font-weight: 500;
    color: #1b2a44;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.35;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mpm-item:hover {
    color: #1b2a44;
    border-color: #cfe0f5;
    box-shadow: 0 4px 14px rgba(8, 76, 149, .12);
  }
  .mpm-item:active {
    transform: scale(.985);
    background: #f2f8ff;
    border-color: #bcd5f2;
  }
  .mpm-item:focus-visible { outline: 2px solid #084c95; outline-offset: 2px; }

  .mpm-item__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* chevron in "chip" tondo */
  .mpm-item__chevron {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    padding: 6px;
    box-sizing: content-box;
    border-radius: 999px;
    background: #eef2f8;
    color: #6076a0;
    transition: background .15s ease, color .15s ease;
  }
  .mpm-item--parent:hover .mpm-item__chevron,
  .mpm-item--parent:active .mpm-item__chevron {
    background: #084c95;
    color: #fff;
  }

  /* categorie di primo livello un filo più marcate */
  .mpm-panel--root > .mpm-li > .mpm-item { font-weight: 600; }

  /* "Vedi tutto" = card azione primaria, evidenziata */
  .mpm-li--seeall { margin-bottom: 4px; }
  .mpm-item--seeall {
    justify-content: space-between;
    background: linear-gradient(180deg, #eaf2fe 0%, #dfeafb 100%);
    border: 1px solid #c9dcf4;
    box-shadow: 0 2px 10px rgba(8, 76, 149, .12);
    color: #084c95;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 13px 15px;
  }
  .mpm-item--seeall:hover { border-color: #b3cef1; box-shadow: 0 4px 14px rgba(8, 76, 149, .16); }
  .mpm-item--seeall:active { background: linear-gradient(180deg, #dfeafb 0%, #d1e0f6 100%); }
  /* chip tondo blu pieno con freccia bianca (background-image, non mask) */
  .mpm-item--seeall::after {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-left: 8px;
    border-radius: 999px;
    background: #084c95 no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    box-shadow: 0 2px 6px rgba(8, 76, 149, .3);
  }
}