/* Responsividade adicional para componentes React */

/* Garantir que todos os elementos sejam responsivos */
* {
  box-sizing: border-box;
}

/* Garantir que todas as imagens do carrossel fiquem sempre no topo */
.carousel-container .imagem,
#carousel-dynamic .imagem,
#carousel-imagens .imagem,
li.imagem {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.carousel-container,
#carousel-dynamic {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

#carousel-imagens,
#imagens {
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.carousel-container img,
#carousel-dynamic img,
#carousel-imagens img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

/* Responsividade do carrossel */
@media (max-width: 1024px) {
  .carousel-container,
  #carousel-dynamic {
    height: 400px !important;
  }
}

@media (max-width: 768px) {
  .carousel-container,
  #carousel-dynamic {
    height: 300px !important;
  }
}

@media (max-width: 480px) {
  .carousel-container,
  #carousel-dynamic {
    height: 250px !important;
  }
}

@media (max-width: 360px) {
  .carousel-container,
  #carousel-dynamic {
    height: 200px !important;
  }
}

/* Reduzir espaçamento entre header e banner/carrossel */
@media (max-width: 768px) {
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #root {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  #root > *:first-child,
  #root > div:first-child,
  #root > section:first-child,
  #root > nav:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .carousel-container,
  #carousel-dynamic,
  [class*="carousel"],
  [id*="carousel"],
  [id*="imagens"],
  [id*="carousel-imagens"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Reduzir espaçamento entre banner e primeira seção - MÁXIMO */
  #carousel-dynamic + *,
  .carousel-container + *,
  #carousel-dynamic + section,
  .carousel-container + section,
  #carousel-dynamic + div,
  .carousel-container + div,
  #root > section:first-of-type:not([id*="carousel"]),
  #root > div:first-of-type:not([id*="carousel"]),
  #root > *:first-child:not([id*="carousel"]):not(.carousel-container) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Reduzir espaçamento de todas as seções após o banner */
  #root > *:not([id*="carousel"]):not(.carousel-container) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Sobrescrever classes Tailwind que criam espaçamento - TODAS */
  .pb-32, .pt-32, .py-32,
  .pb-20, .pt-20, .py-20,
  .pb-16, .pt-16, .py-16,
  .pb-14, .pt-14, .py-14,
  .pb-12, .pt-12, .py-12,
  .pb-10, .pt-10, .py-10,
  .pb-8, .pt-8, .py-8,
  .pb-6, .pt-6, .py-6,
  .pb-4, .pt-4, .py-4,
  .mb-32, .mt-32, .my-32,
  .mb-20, .mt-20, .my-20,
  .mb-16, .mt-16, .my-16,
  .mb-14, .mt-14, .my-14,
  .mb-12, .mt-12, .my-12,
  .mb-10, .mt-10, .my-10 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Remover qualquer espaçamento de elementos com classes relativas */
  [class*="relative"]:not([id*="carousel"]):not(.carousel-container) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Remover espaçamento extra do header */
  header + #root,
  .custom-header + #root,
  header ~ #root,
  body > header + div#root {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Garantir que o header não tenha espaçamento inferior */
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .custom-header,
  header {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .header-container {
    gap: 0 !important;
    padding: 0 10px !important;
    margin: 0 !important;
  }
  
  .header-top {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .header-logo-section {
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
  }
  
  .header-info {
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
  }
  
  .header-nav {
    margin: 0 !important;
    padding: 0 !important;
    border-top: none !important;
  }
  
  .header-nav-menu {
    padding: 0 !important;
    margin: 0 !important;
    gap: 5px !important;
  }
  
  /* Zero espaçamento entre header e root */
  body > header + div#root,
  .custom-header + div#root {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 480px) {
  #root {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  #root > *:first-child,
  #root > section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .carousel-container,
  #carousel-dynamic,
  [class*="carousel"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  body > header + div#root {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .custom-header {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .header-container {
    gap: 0 !important;
    padding: 0 8px !important;
    margin: 0 !important;
  }
  
  .header-top {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .header-logo-section {
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
  }
  
  .header-info {
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
  }
  
  .header-nav {
    margin: 0 !important;
    padding: 0 !important;
    border-top: none !important;
  }
  
  .header-nav-menu {
    padding: 0 !important;
    margin: 0 !important;
    gap: 3px !important;
  }
  
  /* Zero espaçamento entre header e root */
  body > header + div#root {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Imagens responsivas */
img {
  max-width: 100%;
  height: auto;
}

/* Container responsivo */
.container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Mobile Pequeno (até 480px) */
@media (max-width: 480px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* Ajustar textos grandes */
  h1, .text-6xl, .text-5xl {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  h2, .text-4xl, .text-3xl {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  /* Botões responsivos */
  button, .btn {
    width: 100%;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Cards e containers */
  .card, [class*="card"] {
    padding: 1rem !important;
  }
  
  /* Grid responsivo */
  [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Flex responsivo */
  [class*="flex"] {
    flex-wrap: wrap !important;
  }
  
  /* Espaçamentos reduzidos */
  .py-20, .pt-20, .pb-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .px-10, .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Alturas fixas ajustadas */
  [style*="height"], [class*="h-["] {
    height: auto !important;
    min-height: auto !important;
  }
}

/* Mobile Grande (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  h1, .text-6xl {
    font-size: 2.5rem !important;
  }
  
  h2, .text-4xl {
    font-size: 2rem !important;
  }
  
  /* Grid 2 colunas */
  [class*="grid-cols-3"], [class*="grid-cols-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* Grid 3 colunas máximo */
  [class*="grid-cols-4"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Desktop Pequeno (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

/* Garantir que elementos com largura fixa sejam responsivos */
@media (max-width: 768px) {
  [style*="width"][style*="px"],
  [class*="w-["] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Alturas fixas grandes ajustadas */
  [style*="height: 500px"],
  [style*="height: 600px"],
  [style*="height: 700px"] {
    height: auto !important;
    min-height: 300px !important;
  }
}

/* Garantir que imagens dentro de containers sejam responsivas */
@media (max-width: 768px) {
  img[width], img[height] {
    width: 100% !important;
    height: auto !important;
  }
}

/* Ajustar elementos com posicionamento absoluto em mobile */
@media (max-width: 768px) {
  [class*="absolute"], [style*="position: absolute"] {
    position: relative !important;
  }
  
  [class*="fixed"] {
    position: relative !important;
  }
}

/* Textos e tipografia responsiva */
@media (max-width: 480px) {
  p, .text-base, .text-lg {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
  
  .text-sm {
    font-size: 0.75rem !important;
  }
}

/* Formulários responsivos */
@media (max-width: 768px) {
  input, textarea, select {
    width: 100% !important;
    font-size: 16px !important; /* Evita zoom no iOS */
  }
  
  form {
    width: 100%;
  }
}

/* Garantir que elementos não ultrapassem a largura da tela */
@media (max-width: 768px) {
  * {
    max-width: 100vw;
  }
  
  body {
    overflow-x: hidden;
  }
}

/* Ajustar padding e margin em mobile */
@media (max-width: 480px) {
  .p-8, .p-14 {
    padding: 1rem !important;
  }
  
  .px-6, .px-8, .px-10 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .py-10, .py-20 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  .gap-8, .gap-6 {
    gap: 1rem !important;
  }
}

/* Melhorias de acessibilidade e usabilidade em mobile */
@media (max-width: 768px) {
  /* Área de toque mínima */
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Espaçamento entre elementos clicáveis */
  a + a, button + button {
    margin-left: 0.5rem;
  }
  
  /* Ocultar ícones de download na seção de downloads - Responsivo */
  #root [id*="download"] img[src*="download"],
  #root [id*="preparo"] img[src*="download"],
  #root [id*="termsandconditions"] img[src*="download"],
  #root [id*="download"] svg[viewBox*="24"],
  #root [id*="preparo"] svg[viewBox*="24"],
  #root [id*="termsandconditions"] svg[viewBox*="24"],
  #root section[id*="download"] img[src*="download"],
  #root section[id*="preparo"] img[src*="download"],
  #root section[id*="termsandconditions"] img[src*="download"],
  #root div[id*="download"] img[src*="download"],
  #root div[id*="preparo"] img[src*="download"],
  #root div[id*="termsandconditions"] img[src*="download"],
  /* Ocultar ícones dentro dos links de download */
  #root [id*="download"] a img[src*="download"],
  #root [id*="preparo"] a img[src*="download"],
  #root [id*="termsandconditions"] a img[src*="download"],
  #root a[href*=".pdf"] img[src*="download"],
  #root a[href*="TermosePreparos"] img[src*="download"] {
    display: none !important;
  }
  
  /* Reduzir tamanho do ícone refresh.svg - Responsivo */
  #root [id*="download"] img[src*="refresh.svg"],
  #root [id*="preparo"] img[src*="refresh.svg"],
  #root [id*="termsandconditions"] img[src*="refresh.svg"],
  #root [id*="download"] img[src*="/assets/icons/refresh.svg"],
  #root [id*="preparo"] img[src*="/assets/icons/refresh.svg"],
  #root [id*="termsandconditions"] img[src*="/assets/icons/refresh.svg"],
  #root section[id*="download"] img[src*="refresh.svg"],
  #root section[id*="preparo"] img[src*="refresh.svg"],
  #root section[id*="termsandconditions"] img[src*="refresh.svg"],
  #root div[id*="download"] img[src*="refresh.svg"],
  #root div[id*="preparo"] img[src*="refresh.svg"],
  #root div[id*="termsandconditions"] img[src*="refresh.svg"] {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
}

@media (max-width: 480px) {
  /* Ocultar ícones de download na seção de downloads - Mobile */
  #root [id*="download"] img[src*="download"],
  #root [id*="preparo"] img[src*="download"],
  #root [id*="termsandconditions"] img[src*="download"],
  #root [id*="download"] svg[viewBox*="24"],
  #root [id*="preparo"] svg[viewBox*="24"],
  #root [id*="termsandconditions"] svg[viewBox*="24"],
  #root section[id*="download"] img[src*="download"],
  #root section[id*="preparo"] img[src*="download"],
  #root section[id*="termsandconditions"] img[src*="download"],
  #root div[id*="download"] img[src*="download"],
  #root div[id*="preparo"] img[src*="download"],
  #root div[id*="termsandconditions"] img[src*="download"],
  /* Ocultar ícones dentro dos links de download */
  #root [id*="download"] a img[src*="download"],
  #root [id*="preparo"] a img[src*="download"],
  #root [id*="termsandconditions"] a img[src*="download"],
  #root a[href*=".pdf"] img[src*="download"],
  #root a[href*="TermosePreparos"] img[src*="download"] {
    display: none !important;
  }
  
  /* Reduzir ainda mais o tamanho do ícone refresh.svg - Mobile */
  #root [id*="download"] img[src*="refresh.svg"],
  #root [id*="preparo"] img[src*="refresh.svg"],
  #root [id*="termsandconditions"] img[src*="refresh.svg"],
  #root [id*="download"] img[src*="/assets/icons/refresh.svg"],
  #root [id*="preparo"] img[src*="/assets/icons/refresh.svg"],
  #root [id*="termsandconditions"] img[src*="/assets/icons/refresh.svg"],
  #root section[id*="download"] img[src*="refresh.svg"],
  #root section[id*="preparo"] img[src*="refresh.svg"],
  #root section[id*="termsandconditions"] img[src*="refresh.svg"],
  #root div[id*="download"] img[src*="refresh.svg"],
  #root div[id*="preparo"] img[src*="refresh.svg"],
  #root div[id*="termsandconditions"] img[src*="refresh.svg"] {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
  }
}