/* Garantir que o carrinho tenha a maior prioridade de z-index */
#drawer {
  z-index: 9999 !important;
}

#drawer-content {
  z-index: 10000 !important;
  position: relative !important;
}

@keyframes fade_in {
  from {
    background-color: rgba(0,0,0,0);
  }
  to {
    background-color: rgba(0,0,0,0.8);
  }
}

@keyframes fade_out {
  from {
    background-color: rgba(0,0,0,0.8);
  }
  to {
    background-color: rgba(0,0,0,0);
  }
}

@keyframes slide_in {
  from {
    transform: translateX(500px);
  }
  to {
    transform: translateX(0px);
  }
}

@keyframes slide_out {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(500px);
  }
}

#drawer {
  animation: fade_in 0.4s forwards;
}

#drawer.fade-out {
  animation: fade_out 0.4s forwards;
}


.slide-in {
  animation: slide_in 0.4s forwards;
}

.slide-out {
  animation: slide_out 0.4s forwards;
}

/* Garantir que o drawer ocupe toda a altura no mobile */
@media (max-width: 640px) {
  #drawer {
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height para mobile */
    height: 100svh !important; /* Small viewport height para mobile */
  }
  
  #drawer-content {
    height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    max-height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
  }
  
  /* Garantir que o body não tenha scroll quando drawer está aberto */
  body.drawer-open {
    height: 100vh !important;
    height: 100dvh !important;
    height: 100svh !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }
  
  /* Garantir que o conteúdo do carrinho seja scrollável */
  #drawer-content .flex-1 {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Garantir que o conteúdo não seja cortado no mobile */
  #drawer-content {
    padding-bottom: 2rem !important;
  }
  
  /* Adicionar espaço extra no final do carrinho */
  .cart-drawer-content {
    padding-bottom: 3rem !important;
  }
  
  /* Corrigir altura dos botões no mobile */
  #drawer-content button {
    min-height: 44px !important; /* Altura mínima recomendada para touch */
  }
  
  #drawer-content input {
    min-height: 44px !important;
  }
  
  /* Sobrescrever classes Tailwind dos botões do carrinho no mobile */
  #drawer-content button.w-8.h-8,
  #drawer-content button[id*="decrease"],
  #drawer-content button[id*="increase"], 
  #drawer-content button[id*="remove"] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
  }
  
  /* Sobrescrever classes Tailwind do input do carrinho no mobile */
  #drawer-content input.w-12.h-8 {
    width: 42px !important;
    height: 28px !important;
    min-width: 42px !important;
    min-height: 28px !important;
    max-width: 42px !important;
    max-height: 28px !important;
    padding: 0 4px !important;
  }
  
  /* Ajustar ícones dentro dos botões */
  #drawer-content button.w-8.h-8 i,
  #drawer-content button[id*="decrease"] i,
  #drawer-content button[id*="increase"] i,
  #drawer-content button[id*="remove"] i {
    width: 12px !important;
    height: 12px !important;
  }
  
  #drawer-content button.w-8.h-8 svg,
  #drawer-content button[id*="decrease"] svg,
  #drawer-content button[id*="increase"] svg,
  #drawer-content button[id*="remove"] svg {
    width: 12px !important;
    height: 12px !important;
  }
}