/* ═══════════════════════════════════════════════════════════════════════════
 * Mobile Dock — adaptação do dock macOS para a navegação da Souvenir Brasil
 * Mantém cinco destinos visíveis, alvos de toque amplos e suporte a safe-area.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .mobile-app-nav {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(10px + var(--safe-bottom, 0px));
    z-index: 1204;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: clamp(4px, 1.8vw, 10px);
    width: min(368px, calc(100vw - 24px));
    min-height: 78px;
    padding: 12px;
    border: 1px solid rgba(191, 207, 212, 0.22);
    border-radius: 20px;
    background: rgba(10, 31, 37, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
    box-shadow:
      0 10px 15px -3px rgba(2, 20, 28, 0.24),
      0 4px 6px -4px rgba(2, 20, 28, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
    isolation: isolate;
    transform: translateX(-50%);
    animation: souvenir-dock-enter 320ms cubic-bezier(.2, .8, .2, 1) both;
  }

  .mobile-app-nav::after {
    content: '';
    position: absolute;
    inset: 1px 16px auto;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    pointer-events: none;
  }

  .mobile-app-link {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    display: grid;
    place-items: center;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      color 180ms ease,
      background-color 180ms ease,
      transform 220ms cubic-bezier(.2, .8, .2, 1);
  }

  .mobile-app-link > span:last-child:not(.mobile-app-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .mobile-app-icon {
    position: relative;
    width: 100%;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0;
    line-height: 1;
    transform-origin: center bottom;
    transition:
      transform 220ms cubic-bezier(.2, .8, .2, 1),
      color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease;
  }

  .mobile-app-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-app-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-app-link:active {
    transform: scale(.92);
  }

  .mobile-app-link:active .mobile-app-icon {
    transform: none;
  }

  .mobile-app-link[aria-current='page'],
  .mobile-app-link.active {
    color: #70d7b0;
    background: rgba(255, 255, 255, 0.06);
  }

  /* Remove o indicador antigo; o novo estado ativo vive no ícone elevado. */
  .mobile-app-link[aria-current='page']::before,
  .mobile-app-link.active::before {
    content: none;
  }

  .mobile-app-link[aria-current='page']::after,
  .mobile-app-link.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #d2a651;
    box-shadow: 0 0 7px rgba(210, 166, 81, 0.38);
    transform: translateX(-50%);
  }

  .mobile-app-link[aria-current='page'] .mobile-app-icon,
  .mobile-app-link.active .mobile-app-icon {
    color: inherit;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  /* Separação discreta entre navegação e ações, como na referência. */
  .mobile-app-cart {
    margin-left: 0;
  }

  .mobile-app-cart::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(191, 207, 212, 0.20);
    pointer-events: none;
  }

  .mobile-cart-badge {
    top: 6px;
    right: auto;
    left: calc(50% + 3px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 1.5px solid #0b252b;
    border-radius: 999px;
    background: #d65a4a;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(80, 20, 15, 0.34);
  }

  .mobile-app-link:focus-visible {
    outline: 3px solid rgba(210, 166, 81, 0.78);
    outline-offset: 1px;
  }
}

@media (max-width: 360px) {
  .mobile-app-nav {
    width: calc(100vw - 16px);
    gap: 4px;
    padding-inline: 10px;
  }
}

@media (max-width: 640px) and (max-height: 500px) {
  .mobile-app-nav {
    bottom: calc(6px + var(--safe-bottom, 0px));
    min-height: 66px;
    padding-block: 8px;
  }
}

@media (max-width: 640px) and (hover: hover) and (pointer: fine) {
  .mobile-app-link:hover .mobile-app-icon {
    color: #fff;
    transform: translateY(-4px) scale(1.16);
  }

  .mobile-app-link:has(+ .mobile-app-link:hover) .mobile-app-icon,
  .mobile-app-link:hover + .mobile-app-link .mobile-app-icon {
    transform: translateY(-2px) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-app-nav,
  .mobile-app-link,
  .mobile-app-icon,
  .mobile-app-link > span:last-child:not(.mobile-app-icon) {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .mobile-app-nav {
    background: Canvas;
    border: 2px solid CanvasText;
  }

  .mobile-app-link {
    color: CanvasText;
  }
}

@keyframes souvenir-dock-enter {
  from { opacity: 0; transform: translate(-50%, 14px) scale(.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Ações de atendimento: uma única fileira compacta acima do dock. */
@media (max-width: 640px) {
  :root {
    --support-fab-size: 52px;
    --support-fab-gap: 12px;
    --support-fab-edge: 16px;
    --support-fab-mobile-bottom:
      calc(var(--mobile-nav-height, 88px) + 16px + var(--safe-bottom, 0px));
  }

  .whatsapp-button,
  .souvi-chat-open,
  body:has(.mobile-app-nav) .whatsapp-button,
  body:has(.mobile-app-nav) .souvi-chat-open {
    bottom: var(--support-fab-mobile-bottom) !important;
    width: var(--support-fab-size) !important;
    height: var(--support-fab-size) !important;
    min-width: var(--support-fab-size);
    min-height: var(--support-fab-size);
  }

  .whatsapp-button {
    right: var(--support-fab-edge) !important;
  }

  .souvi-chat-open {
    right: calc(
      var(--support-fab-edge) +
      var(--support-fab-size) +
      var(--support-fab-gap)
    ) !important;
  }

  body.no-bottom-nav .whatsapp-button,
  body.no-bottom-nav .souvi-chat-open {
    bottom: calc(16px + var(--safe-bottom, 0px)) !important;
  }

  body.no-bottom-nav:has(.mobile-app-nav) .souvi-chat {
    bottom: calc(var(--support-fab-size) + 32px + var(--safe-bottom, 0px));
    height: min(
      540px,
      calc(
        100dvh -
        var(--support-fab-size) -
        56px -
        var(--safe-bottom, 0px)
      )
    );
    max-height: calc(
      100dvh -
      var(--support-fab-size) -
      56px -
      var(--safe-bottom, 0px)
    );
  }

  body:has(.mobile-app-nav) .souvi-chat {
    bottom: calc(
      var(--mobile-nav-height, 88px) +
      var(--support-fab-size) +
      32px +
      var(--safe-bottom, 0px)
    );
    height: min(
      500px,
      calc(
        100dvh -
        var(--mobile-nav-height, 88px) -
        var(--support-fab-size) -
        56px -
        var(--safe-bottom, 0px)
      )
    );
    max-height: calc(
      100dvh -
      var(--mobile-nav-height, 88px) -
      var(--support-fab-size) -
      56px -
      var(--safe-bottom, 0px)
    );
  }
}

@media (max-width: 360px) {
  :root {
    --support-fab-size: 48px;
    --support-fab-gap: 10px;
    --support-fab-edge: 12px;
  }
}