/* Mobile app-like bottom navigation + safe area handling */
@media (max-width: 991.98px) {
  :root {
    /* Dimensioni/visibilità generali */
    --aw-nav-height: 76px; /* più alta */
    --aw-blur-bg: rgba(var(--bs-body-bg-rgb, 15,23,42), 0.6);
    --aw-border: rgba(var(--bs-border-color-rgb, 148,163,184), .35);

    /* Ex-FAB (piatto) — resta come fallback o modalità senza curva */
    --aw-accent-gradient: linear-gradient(135deg, #22c55e, #3b82f6, #8b5cf6);

    /* Curved / Animated */
    --aw-nav-plate: var(--bs-body-bg);                  /* colore piastra */
    --aw-nav-shadow: drop-shadow(0 8px 24px rgba(0,0,0,.14)); /* ombra SVG */
    --aw-notch-radius: 30;       /* raggio centro curva (px, senza unità) */
    --aw-notch-shoulder: 38;     /* larghezza “spalle” della curva */
    --aw-notch-depth: 22;        /* profondità della curva */
  }

  /* Riserva spazio per la bottom bar + safe area */
  body {
    padding-bottom: calc(var(--aw-nav-height) + max(env(safe-area-inset-bottom), 12px));
  }

  /* Barra mobile fissa — versione piatta (fallback) */
  .aw-mobile-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: var(--aw-nav-height);
    z-index: 1030;
    backdrop-filter: saturate(180%) blur(18px);
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Quando è attiva la versione curva, l'SVG fa da piastra: la barra sotto diventa trasparente */
  html.aw-curved-nav .aw-mobile-nav{
    background: transparent;
    border-top: 0;
    backdrop-filter: none;
  }

  /* Griglia a 5 colonne (Home, Catalogo, Nuovo Ordine, Ordini, Profilo) */
  .aw-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0 max(env(safe-area-inset-left), 8px) 0 max(env(safe-area-inset-right), 8px);
    height: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end; /* poggia sul bordo superiore della piastra */
    position: relative;
    z-index: 1;       /* sopra l’SVG */
  }

  .aw-mobile-nav__item { text-align: center; }

  /* Link base (icone + label) */
  .aw-mobile-nav__link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    line-height: 1.1;
    text-decoration: none;
    color: var(--bs-body-color);
    padding: 6px 4px;
    border-radius: 10px;
    min-width: 56px;
    transition: background-color .2s ease, color .2s ease, transform .22s ease;
  }
  .aw-mobile-nav__link i { font-size: 1.2rem; }
  .aw-mobile-nav__link.is-active { color: var(--bs-primary); transform: translateY(-14px); }
  .aw-mobile-nav__link:active { transform: translateY(calc(-14px + 1px)); }

  /* ---- Accent plate flat (ex-FAB) ----
     Applica al link centrale: Nuovo Ordine — resta come fallback */
  .aw-mobile-nav__link--accent {
    background: var(--aw-accent-gradient);
    color: #fff;
    box-shadow: 0 10px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 8px 12px;
    min-width: 72px;     /* un filo più ampio per evidenza visiva */
    min-height: 44px;    /* piatto, card-like */
    justify-content: center;
    overflow: hidden;    /* clippa il raggio */
  }
  .aw-mobile-nav__link--accent i { color: inherit; }
  .aw-mobile-nav__link--accent.is-active { color: #fff; } /* non virare al primary */
  .aw-mobile-nav__link--accent:active {
    transform: translateY(1px);
    filter: brightness(.96);
  }

  /* Supporto area home indicator iOS */
  .aw-mobile-nav::after {
    content: '';
    position: absolute;
    height: env(safe-area-inset-bottom);
    left: 0; right: 0; bottom: 0;
  }

  /* --- SVG della piastra curva (compare solo con html.aw-curved-nav) --- */
  .aw-mobile-nav__svg{
    position: absolute;
    inset: auto 0 0 0;
    height: var(--aw-nav-height);
    width: 100%;
    pointer-events: none;
    z-index: 0;
    filter: var(--aw-nav-shadow); /* usa drop-shadow(...) */
    display: block;
  }

  /* Neutralizza l'ex-FAB quando uso la versione “curved” */
  html.aw-curved-nav .aw-mobile-nav__link--accent{
    background: none;
    box-shadow: none;
    color: inherit;
    min-width: auto;
    min-height: auto;
    padding: 6px 4px;
    border-radius: 10px;
  }
}

/* Mobile bottom navigation with sliding active indicator */
@media (max-width: 991.98px) {
  :root {
    --aw-nav-height: 70px;
    --aw-nav-bg: #ffffff;
    --aw-nav-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    --aw-icon-size: 24px;
    --aw-icon-color: #1e293b;
    --aw-text-color: #1e293b;
    --aw-icon-active: #ffffff;
    --aw-text-active: #ffffff;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --aw-nav-bg: #1e293b;
      --aw-nav-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
      --aw-icon-color: #f1f5f9;
      --aw-text-color: #f1f5f9;
    }
  }

  /* Riserva spazio per la bottom bar */
  body {
    padding-bottom: calc(var(--aw-nav-height) + env(safe-area-inset-bottom, 12px));
  }

  /* Container della bottom nav */
  .aw-mobile-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: var(--aw-nav-height);
    background: var(--aw-nav-bg);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--aw-nav-shadow);
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Lista dei link */
  .aw-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    position: relative;
  }

  .aw-mobile-nav__item {
    text-align: center;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  /* Link base */
  .aw-mobile-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.75rem;
    line-height: 1.1;
    text-decoration: none;
    color: var(--aw-text-color);
    padding: 8px;
    position: relative;
    transition: color 0.3s ease;
    z-index: inherit;
    width: 100%;
    height: 100%;
  }

  /* Wrapper icona */
  .nav-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    z-index: inherit;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }

  .nav-icon-wrapper i {
    font-size: var(--aw-icon-size);
    color: var(--aw-icon-color);
    transition: color 0.3s ease;
    z-index: inherit;
  }

  /* Label sotto l'icona */
  .nav-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--aw-text-color);
    transition: color 0.3s ease, font-weight 0.3s ease;
    z-index: inherit;
    white-space: nowrap;
  }

  /* ✨ INDICATORE SLIDING - Forma inclinata con SVG PIÙ GRANDE */
  .aw-mobile-nav__indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px; /* ✨ Aumentato da 60px a 100px */
    height: 90px; /* ✨ Aumentato da 58px a 90px */
    z-index: 1;
    transition: 
      left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
    pointer-events: none;
  }

  /* SVG dell'indicatore */
  .aw-mobile-nav__indicator svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Quando è pronto, mostra l'indicatore */
  .aw-mobile-nav__indicator.ready {
    opacity: 1;
    transition: 
      left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      opacity 0.3s ease;
  }

  /* Stato ATTIVO */
  .aw-mobile-nav__link.is-active {
    color: var(--aw-text-color);
  }

  .aw-mobile-nav__link.is-active .nav-icon-wrapper {
    transform: scale(1.05);
  }

  .aw-mobile-nav__link.is-active .nav-icon-wrapper i {
    color: var(--aw-icon-active);
  }

  .aw-mobile-nav__link.is-active .nav-label {
    color: var(--aw-text-active);
    font-weight: 600;
  }

  /* Animazione al touch */
  .aw-mobile-nav__link:active {
    transform: scale(0.95);
  }

  /* Micro-rimbalzo quando l'icona diventa attiva */
  @keyframes icon-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1.05); }
  }

  .aw-mobile-nav__link.is-active .nav-icon-wrapper {
    animation: icon-bounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  /* Supporto safe area iOS */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
      padding-bottom: calc(var(--aw-nav-height) + env(safe-area-inset-bottom));
    }
  }
}

/* Ripple effect al click */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.nav-icon-wrapper {
  position: relative;
  overflow: hidden;
}

.nav-icon-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  pointer-events: none;
}

.nav-icon-wrapper.ripple-active::after {
  animation: ripple 0.6s ease-out;
}